Question

我正在试图弄清楚如何在本地存储中存储使用vanilla JavaScript完成的DOM更改，但到目前为止还无法弄明白。

这是JavaScript代码的简短版，可以对DOM进行多处更改。

该功能由网页上的按钮调用。

function myFunction() 
{
    document.body.style.backgroundColor = "black";

    var element = document.getElementsByTagName('input'); 
    for (var i = 0; i < element.length; i++) {
    element[i].style.color = "black";
    element[i].style.backgroundColor = "#565969";
    element[i].style.borderColor = "black";
    element[i].style.boxShadow = "inset 0 0 5px black";}
}

已经看到两个CSS之间转换更容易，但想知道如何解决上面的问题。

Answer 1

您可以先检查localstorage中的DOM值，如果它在那里使用它，否则您应用新的DOM值。

function myFunction() {
    var DOMValues = {};
    var storageContent = localStorage.getItem('cssProps');

    if (storageContent) {
      DOMValues = JSON.parse(storageContent);
      manipulateDOM(DOMValues);
    } else {
      DOMValues = {
        backgroundColor: 'blue',
        color: 'black'
      };

      localStorage.setItem('cssProps', JSON.stringify(DOMValues));
      manipulateDOM(DOMValues);
    }
}


function manipulateDOM (props) {
    document.body.style.backgroundColor = props.backgroundColor;

    var element = document.getElementsByTagName('input');

    for (var i = 0; i < element.length; i++) {
      element[i].style.color = props.color;
      element[i].style.backgroundColor = props.backgroundColor;
    }
}

本地存储 - 使用JavaScript完成DOM更改

1 个答案: