如何设置“jquery中属性的本地存储”？

Question

我正在开发自己的网站，它支持多主题，例如

我试图通过为本地存储添加键和值来解决这个问题，我看到了很多关于它的教程，但没有进展。

HTML代码

>

头

身体

jQuery代码

$('.mode-toggler').click(function() {

    // Change attribute of css default theme by checking for statements with href attribute contains view keyword
    $("link[href*='view']").attr("href", $(this).attr("data-value");

});




Answer 1

因此，首先需要在localstorage中设置用户选择的主题：

$('.mode-toggler').click(function() {

    // Change attribute of css default theme by checking for statements with href attribute contains view keyword
    $("link[href*='view']").attr("href", $(this).attr("data-value"));

    // set localstorage
    localstorage.setItem("selectedTheme",  $(this).attr("data-value"));

});

下次加载网页时，即使在加载网页之前，也必须检查所选主题。只需将此脚本包含在头标记中。

<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = localstorage.getItem("selectedTheme") || "view/light-view.css";
document.head.appendChild(link);
</script>

但我担心这可能会导致闪烁，因为首先，原始html（没有CSS）会在浏览器中绘制，然后整个CSS都会插入，DOM会用CSS重新绘制。您可以通过在一个单独的文件（比如darktheme.CSS）中删除与主题相关的CSS，并将所有其他CSS放在一个恒定的CSS文件（styles.CSS）中来解决这个问题。加载页面时，使用样式加载页面。css并加载*主题。css通过脚本标记。