时间戳

首页 > 解决方案 > 如何设置'jquery中属性的本地存储'？

javascript - 如何设置'jquery中属性的本地存储'？

问题描述

我正在开发自己的网站，它支持多个主题，例如（浅色和深色）主题，当您单击选项时它会应用主题并且没有问题，但是当您重新加载页面时，您必须再次选择主题。

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

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

});

标签： javascriptjqueryhtmlcsslocal-storage

解决方案

所以首先你需要在本地存储中设置用户选择的主题：

$('.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"));

});

下次加载网页时，您甚至必须在页面加载之前检查 selectedTheme。只需将此脚本包含在您的 head 标签中即可。

<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，并使用 CSS 重新绘制 DOM。您可以通过在一个单独的文件（比如 darktheme.css）中删除与主题相关的 CSS 并将所有其他 CSS 放在一个常量 css 文件（styles.css）中来解决这个问题。当页面加载时，加载它styles.css并加载*theme.cssthrough script 标签。

推荐阅读