Toggle external stylesheets with javascrtip and save with localstorage

user_17075284 0
Viewed 50

Hi I am doing this on a web site.

I would like that the changes are not deleted when the browser page is refreshed.

Thank you very much for your help.

Html:
<link id="change" rel="stylesheet" href="css/style.css">


In javascript:
$("#mobile-float").click(function() { 
    return (this.tog = !this.tog) ? addZonaDesk() : showZonaDesk();
});

function addZonaDesk(){ 
document.getElementById("style").href = "css/style.css?t=143";  
}

function showZonaDesk(){ 
document.getElementById("style").href = "css/style1.css?t=143"; 
}
html javascript
1 Answers

// Get link element and the button
let link = document.getElementsByTagName('link')[0];
let btn = document.getElementById('btn');
// Save href values
let val1 = "css/style.css?t=143";
let val2 = "css/style1.css?t=143";

// Temp variable (just for checking)
let swapped = true;

// Pass the path to the function
const toggleDesk = (path) => {
    // Set href
    link.href = path;  
    // Save in the local storage
    localStorage.setItem("myLink", path);
};

// Toggle link path values (for testing)
btn.addEventListener('click', () => {
    swapped == false ? [toggleDesk(val1), swapped = true] : [toggleDesk(val2), swapped = false];
});

// Window onload:
window.addEventListener('load', () => {
    // Check browser support for local storage
    if (typeof(Storage) !== "undefined") {
        // If there's a value saved, get it and set the link path 
        if(localStorage.getItem("myLink")) {
            let path = localStorage.getItem("myLink");
            link.href = path;
        }
    } 
});
<!-- Note: add [type="text/html"] -->
<link type="text/html" rel="stylesheet" href="css/style.css">


<button id="btn">Click here</button>

user_145594360
Related