Question

我正在构建一个Chrome扩展程序，其中用户默认会在加载时看到一个div，但可以检查隐藏（或隐藏）其他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（目前只针对＆＃39; clicktwo＆＃39;复选框）：

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()

}

我的问题是，为什么这不起作用？我已经交叉引用了一些来源，但仍然发现自己输了。任何和所有的帮助将不胜感激！提前谢谢。

Answer 1

将事件侦听器添加到复选框onclick事件

function checkBoxClick（event）{...};
将使用atribute - event调用回调函数。通过它，您可以获得所点击节点的HTML及其属性。
将这些属性提供给持久化函数：

function persist（elementId，checkBoxState）{ / *设置为localStorage [＆＃34; elementId＆＃34;] = checkBoxState; * / };

现在，您可以保留数据更改。

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

N.B。最好有一个对象数组{id: "id_of_checkbox", state: "is_checked?"}并立即保存到localStorage整个数组（在一个名称下）。

记住localstorage onload中的复选框状态？

1 个答案: