记住localstorage onload中的复选框状态

Remembering a checkbox status in localstorage onload?

本文关键字：复选框 状态 localstorage onload 记住      更新时间：2023-09-26

我正在构建一个Chrome扩展，其中用户默认在加载时看到一个div，但可以检查显示(或隐藏)其他div的复选框，即使在页面关闭后我也要坚持。

我的HTML是:

  <input id="click" type="checkbox"></input>
<div class="newnote">
<center><div class="note2">
    <img src="http://s1.postimg.org/7rpakqgqn/notebook1.png" draggable= "false"></div></center>
<center><div id = "content2">
<div id= "tcontent2" contenteditable="true" data-ph= " Make a note . . . "
style= "height: 300px; overflow: auto"></div>
</div></center>
</div>
<input id="clicktwo" type="checkbox"></input>
<div class="newnotetwo">
<center><div class="note3">
    <img src="http://s1.postimg.org/7rpakqgqn/notebook1.png" draggable= "false"></div></center>
<center><div id = "content3">
<div id= "tcontent3" contenteditable="true" data-ph= " Make a note . . . "
style= "height: 300px; overflow: auto"></div>
</div></center>
</div>

和我的JS是(目前只适用于'clicktwo'复选框):

function save(){
var checkbox = document.getElementById('clicktwo');
localStorage.setItem('clicktwo', checkbox.checked);
}
function load(){    
var checked = JSON.parse(localStorage.getItem('clicktwo'));
document.getElementById("clicktwo").checked = checked;
}
function wis(){
location.reload();
localStorage.clear()
}

我的问题是，为什么这不起作用?我交叉参考了一些资料，但还是觉得自己很迷茫。任何和所有的帮助将不胜感激!

  1. 为onclick事件复选框添加事件监听器

    函数checkBoxClick(事件){…};

  2. 回调函数将被调用属性-事件。通过它，你可以得到点击节点的HTML和它的属性。

  3. 为持久化函数提供这些属性:

    函数persist(elementId, checkBoxState) {/*set to localStorage["elementId"] = checkBoxState;*/};

现在您的数据更改被持久化了。

  • 在页面加载时从localStorage获取值并对UI进行相应的更改。

    • 注意:这是一个好主意，有一个数组的对象{id: "id_of_checkbox", state: "is_checked?"}和保存到localStorage整个数组一次(在一个名称下)。
    相关文章：