本地存儲 - 使用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; 
    } 
}