javascript - 使用 javascrtip 切换外部样式表并使用 localstorage 保存

Question

嗨，我在一个网站上这样做。

我希望刷新浏览器页面时不会删除更改。

非常感谢您的帮助。

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

标签： javascripthtml

Answer 1

// 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>