How do you "memorize" an action on a website?

Question

I want to put in my blog, the possibility of changing his theme (background/color), for CSS and Javascript. But I would love to be able to "memorize" this action, so that whenever the user re-enters, the theme is in the last one he chose (until somehow it clears this data, of course). I don’t understand this thing but I imagine it is very complex. Can you explain briefly how it works? And if it’s not that complex, you can tell me what to do?

Answer 1

You can use the Web Storage (HTML5):

Example:

// Guardar
localStorage.setItem("cor_css", "vermelho");
// Obter (aí você precisa moldar esta info recebida e aplicar nos objetos que você deseja
document.getElementById("result").innerHTML = localStorage.getItem("cor_css");

Answer 2

Assuming that you provide different themes for the user to "customize/choose" to apply different styles in the UI of your site, you can use localStorage() or cookies, both solutions use javascript and can be modified or deleted by the user on the front end whether using the developer’s console or tools, whether using plugins or even going to settings and clearing the data in the browser settings or even you can create a function to "clean" these settings.

Example using localStorage():

<!-- IN HEAD -->
<link id="css-template-link" rel="stylesheet" href="default-template.css">

<!-- IN BODY -->
<select id="select-css-template">
   <option value="default">Dedault Template</option>
   <option value="dark">Dark Template</option>
   <option value="cyan">Cyan Template</option>
   <option value="ice">Ice Template</option>
</select

<script>
    let select = document.getElementById('select-css-template')
    select.addEventListener('change', function(evt) {
        let css = evt.options[evt.selectedIndex].value
        // apply
        let link = document.getElementById('css-template-link')
        link.href = css + '-template.css'
        // save to localStorage
        localStorage.setItem('css-template', css)
    }, false)

    // load
    if ( localStorage.getItem('css-template') ) {
        let css = localStorage.getItem('css-template')
        let link = document.getElementById('css-template-link')
        // apply
        link.href = css + '-template.css'
    }

    // clear: localStorage.removeItem('css-template')
</script>

Using localStorage() there is no default expiration time. A cookie border needs to set an expiration time, a function to search for a single entry in the values stored on document.cookie as well as a function to rewrite the values of a cookie (and also its expiration time) as well as to clear (set a negative time).

Example using document.cookie

<script>
    // request cookie approach
    let getCookie = name => {
        return document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + name.replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1") || false
    }
    // save cookie
    let saveToCookie = (name, value, expirationDays) => {
        let makeTime = t => {
            if ( typeof t === 'number' ) {
                let d = new Date()
                d.setMilliseconds(d.getMilliseconds() + t * 864e+5) // 864e+5 equal 1 day or 86400000 milliseconds
                return d.toString()
            }
        }
        document.cookie = name + '=' + value + '; expires= + makeTime(expirationDays) + '; path=/'
    }

    let select = document.getElementById('select-css-template')
    select.addEventListener('change', function(evt) {
        let css = evt.options[evt.selectedIndex].value
        // apply
        let link = document.getElementById('css-template-link')
        link.href = css + '-template.css'
        // save in cookie
        saveToCookie('css-template', css, 30) // 30 days of expiration
    }, false)

    // load
    if ( getCookie('css-template') ) {
        let css = getCookie('css-template')
        let link = document.getElementById('css-template-link')
        // apply
        link.href = getCookie('css-template') + '-template.css'
    }

    // clear: saveToCookie('css-template', '', -1)
</script>

Clearing the cookie will not change the css back to default, but following logic it is easy to reset the link to the default css.