有人知道如何在本地存储javascript函数所做的css更改吗

Does anyone know how to store a css change made by javascript function locally?

本文关键字：函数 css javascript 存储      更新时间：2023-09-26

我有一段时间一直在挠头，我不知道如何在本地存储（HTML5本地存储）javascript函数对某个div的样式进行的更改。我有一个按钮，允许用户通过更改css（内联）来更改容器的背景颜色。有人知道存储这些更改的方法吗？

演示

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

演示

所以您有一个类似于的函数

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

有两个步骤：

  1. 记住数值：

    function changeDivBackground(div, bg) {
    /* ...change the background... */
    localStorage["theDivBackground"] = bg;
}

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

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

script标记位于#2页面的端，因此div在运行时将存在。

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

相关文章：