Javascript 是否可以将整个元素存储到本地存储或其他存储中？

我知道我问的问题是最愚蠢的，但因为我不熟悉本地存储，而且我完全是本地存储的初学者，所以我想看看代码的机制是如何工作的。我已经创建了一个div框和两个按钮，我希望能够更改该框的颜色并将其存储在localstorage中，这样在刷新后，我希望最终得到样式表的背景色，即红色。也就是说，当我在重新刷新页面后更改为蓝色以保持该颜色时。就像我说的，我对本地存储和它们的使用非常陌生。无论如何，谢谢你能给我的帮助，我知道这又是一个愚蠢的问题，但我对此很感兴趣。我的javascript代码如下所示：

var red=document.getElementById("red");
var blue=document.getElementById("blue");


var redColor='red';
var blueColor='blue';

localStorage.setItem('RColor',redColor);
localStorage.setItem('BColor',blueColor);


red.onclick=function red(){
   document.getElementById("box").style.backgroundColor=localStorage.getItem('RColor');


};
blue.onclick=function blue(){
    document.getElementById("box").style.backgroundColor=localStorage.getItem('BColor');


} ;

---

请查看下面我的评论。这是一个示例用法

var redColor = 'red';
var blueColor = 'blue';

// When opening, read the Color value from localStorage. If it not set, then use the default color (say red)
document.getElementById("box").style.backgroundColor = localStorage.getItem('Color') || redColor;

var red = document.getElementById("red");
var blue = document.getElementById("blue");

red.onclick = function red() {
    // Once user click on red button, Change the box background and update localStorage with Color
    localStorage.setItem('Color', redColor);
    document.getElementById("box").style.backgroundColor = redColor;
};

blue.onclick = function blue() {
  // Once user click on blue button, Change the box background and update localStorage with Color
  localStorage.setItem('Color', blueColor);
  document.getElementById("box").style.backgroundColor = blueColor;
};

---

本地存储中这两种颜色不需要单独的项目RColor和BColor

只需在本地存储中添加一个名为boxColor的常用项，然后根据单击的按钮切换其值即可。现在只需创建一个函数，比如getColor，它根据boxColor项设置div的颜色，并在页面加载以及单击两个按钮中的任何一个时运行该函数

检查下面的代码片段以获得上述方法的实际示例

但是，运行以下代码段将不起作用，因为StackOverflow不允许您在其代码沙盒中使用localStorage，因此您可以检查它以查看它的运行情况

var red=document.getElementByIdred； var blue=document.getElementByIdblue； var-box=document.getElementByIdbox； var redColor='red'； var blueColor='blue'； 函数getColor{ box.style.backgroundColor=localStorage.getItem'boxColor'； } 红色。onclick=功能红色{ setItem'boxColor'，redColor； getColor； }; blue.onclick=函数blue{ setItem'boxColor'，蓝色； getColor； }; getColor； 盒子{ 宽度：200px； 高度：200px； 保证金：0自动； 填充：0； } 红色 蓝色

---

或者，如果您不想重复每种颜色，只需使用数据属性将颜色放置在按钮上即可

比如：

//您的默认颜色 颜色=红色； //抓住所有按钮 var buttons=document.queryselectoral.set-color； //绕过去 按钮的常量按钮{ //应用btn样式（可选） button.style.color=button.dataset.text | | unset； button.style.backgroundColor=button.dataset.bg | | unset； button.style.border=0； //将单击事件附加到按钮 button.AddEventListener单击，函数E{ //设置元素bg颜色并分配到localstorage document.getElementById 盒 .style.backgroundColor=localStorage.color=this.dataset.bg； }; } //设置初始状态 document.getElementByIdbox.style.backgroundColor= localStorage.color | | defaultColor； 盒子{ 显示：块； 宽度：50px； 高度：50px； } 红色 蓝色 000000

---

ff55aalocalStorage只是一个对象，请将其视为持久变量。。因此，逻辑是如果未设置，则设置默认值，否则使用当前设置。。然后设置背景色。你还有其他的食物吗。。