Question

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

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

HTML代码

头
- <link rel=stylesheet" href="view/light-view.css"> 默认主题，它将在用户选择主题并将 light-view.css 替换为主题名称后发生变化。
身体
- <span class="mode-toggler" data-value="view/light-view.css">Light</span>
- <span class="mode-toggler" data-value="view/dark-view.css">Dark</span> 单击后将数据值设置为css默认主题我通过jquery实现

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

因此，首先您需要在本地存储中设置用户选择的主题：

$('.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。您可以通过在单独的文件中删除主题相关的CSS（例如darktheme.css）并将所有其他CSS放在一个恒定的CSS文件（styles.css）中来解决此问题。页面加载时，请用styles.css加载页面，并通过脚本标记加载*theme.css。

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

1 个答案: