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";
}
// 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>