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

Question

我想弄清楚如何在本地存储中使用vanilla JavaScript完成DOM更改，但至今无法弄清楚。

这是从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

您可以首先检查DOM值的localstorage，如果有的话您使用它，否则您应用新的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; 
    } 
}