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

Question

我正在尝试弄清楚如何将使用 vanilla JavaScript 完成的 DOM 更改存储在本地存储中，但目前无法弄清楚。

这是对 DOM 进行更多更改的 JavaScript 代码的捷径。

该函数由网页上的按钮调用。

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;
    }
}