有谁知道如何在本地存储 javascript 函数所做的 css 更改？答案

【问题标题】：Does anyone know how to store a css change made by javascript function locally?有谁知道如何在本地存储 javascript 函数所做的 css 更改？
【发布时间】：2014-01-02 13:21:19
【问题描述】：

我一直在摸不着头脑，我不知道如何在本地存储（HTML5 本地存储）对 javascript 函数对某个 div 的样式所做的更改。我有一个按钮，允许用户通过更改 css（内联）来更改容器的背景颜色。有谁知道存储此更改的方法？

【问题讨论】：

与在本地存储中存储其他任何内容的方式相同。
现在 div 确定了吗？
正如您所指出的，只需使用本地存储。在本地存储中放置一个指示器，您必须在每次页面加载时检查它。

标签： javascript jquery css html local-storage

【解决方案1】：

Demo

JS（运行在load 或DOMContentLoaded）：

var bgColor = document.getElementById('bgcolor');
bgColor.onchange = function() {
    document.body.style.backgroundColor = this.value;
    localStorage.setItem('bgColor', this.value);
};
bgColor.value = localStorage.getItem('bgColor');
bgColor.onchange();

HTML：

<input id="bgcolor" />

或者，如果你使用 jQuery，

$('#bgcolor')
    .val(localStorage.getItem('bgColor'))
    .change(function() {
        $('body').css({'background-color': this.value});
        localStorage.setItem('bgColor', this.value);
    })
    .change();

Demo

【讨论】：

【解决方案2】：

所以你有这样的功能：

function changeDivBackground(div, bg) {
    /* ...change the background... */
}

有两个步骤：

记住值：

function changeDivBackground(div, bg) {
    /* ...change the background... */

    localStorage["theDivBackground"] = bg;
}

在页面末尾的script标签中，查看是否有值并使用：

var bg = localStorage["theDivBackground"];
if (bg) {
    changeDivBackground(/*...get the div...*/, bg);
}

script 标签位于#2 页面的end，这样 div 在运行时就会存在。

【讨论】：

【解决方案3】：

将值存储到本地存储。然后编写一个 JavaScript 函数来检索该值并应用它。

【讨论】：

对不起，我对 Javascript 语言很陌生。你能更详细地解释一下吗？