如何在本地存储 javascript 函数所做的 css 更改？

Posted 2023-03-05

【中文标题】如何在本地存储 javascript 函数所做的 css 更改？

【英文标题】：Does anyone know how to store a css change made by javascript function locally?有谁知道

【发布时间】：2014-01-02 13:21:19

【问题描述】：

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

【问题讨论】：

与在本地存储中存储其他任何内容的方式相同。

现在 div 确定了吗？

正如您所指出的，只需使用本地存储。在本地存储中放置一个指示器，您必须在每次页面加载时检查它。

【参考方案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 语言很陌生。你能更详细地解释一下吗？