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.