How do you "remember" an action on a site?

2

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

    
asked by anonymous 27.03.2018 / 04:39

2 answers

2

You can use 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");
    
27.03.2018 / 05:09
1
Imagine that you offer 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 in the front-end either using the console or developer tools, either by 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 expiration time by default. Already a cookie binding requires setting an expiration time, a function to fetch a single entry in the values stored in document.cookie as well as a function to rewrite the values of a cookie (as well as 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>

Clear the cookie will not make the css switch back to the default, but following the logic makes it easy to reset the link to the default css.

    
27.03.2018 / 05:32