Question

以下是自学者的帖子。

我的任务：

我有一个包含15.000个条目的字典。用户可以通过选中与每个词典条目相关的复选框来选择是否显示条目。

复选框和条目显示在动态生成的列表中，用户选择列表的长度。

复选框的状态存储在localStorage中，使用以下两种方法之一：

localStorage(key,true);
localStorage(key,null);

并且复选框设置为：检查其相关键是否与“true”配对。

现在我需要一个更新按钮将整个列表重置为“未选中所有复选框”。

这对我来说似乎是一项艰巨的任务，因为列表的长度是动态设置的，而且我还担心我的函数会影响整个localStorage。

Answer 1

修改。意图是重置多个选中的复选框以取消选中，并在localStorage中保留更改：

d3.select("#update").on("click",storeNull);

function storeNull () {


      var updatethis = d3.selectAll(".box").filter(":checked").each(function(){

      var use_it = this.id;
      localStorage.setItem(use_it,null);

      });

};

Answer 2

以下是构建数据的方法（严格来说）：

var checkboxes = {
    "key-1": {    // might as well do to say: "key-1": true/false
        "checked": true
    },
    "key-2": {
        "checked": false
    },
    ...,
    "key-n-1": {
        "checked": true/false
    },
    "key-n": {
        "checked": true/false
    }
};

以下是定义更新功能的方法：

function updateStorage(){
    var serialisedData = JSON.stringify(checkboxes);
    localStorage.setItem("checkboxes-state", serialisedData);
};

以下是读取存储数据的方法：

function readStorage(){
    var serialisedData = localStorage.getItem("checkboxes-state");
    // then deserialise it
    var data = JSON.parse(serialisedData);
    // it may be empty
    if(!data){
        checkboxes = {}; // if empty initialise it
    } else {
        checkboxes = data;
    }
}

以下是我使用已读取的数据更新DOM中相应元素的状态，以及在复选框状态更改时更新数据：

d3.selectAll(".box").each(function(){ if(checkboxes.hasOwnProperty(this.id)){ this.checked = checkboxes[this.id].checked; } }).on("change", function(){ if(checkboxes.hasOwnProperty(this.id)){ checkboxes[this.id].checked = this.checked; }else{ checkboxes[this.id] = { "checked": this.checked }; } });

经常读/写存储没有意义。理想情况下，对于大多数正常使用情况，每个会话一次读取就足够了。并且至少需要一次保存。

您可以优化您的问题，我可以给您更具体的答案。

全部放在一起

var checkboxes = { "key-1": { // might as well do to say: "key-1": true/false "checked": true }, "key-2": { "checked": false }, ..., "key-n-1": { "checked": true/false }, "key-n": { "checked": true/false } }; var updateStorage = function(){ var serialisedData = JSON.stringify(checkboxes); localStorage.setItem("checkboxes-state", serialisedData); }; var readStorage = function(){ var serialisedData = localStorage.getItem("checkboxes-state"); // then deserialise it var data = JSON.parse(serialisedData); // it may be empty if(!data){ checkboxes = {}; // if empty (i.e. if this was the first time the application was run on the current client) initialise it } else { checkboxes = data; // if we have data, restore it by assigning it to `checkboxes` variable } // having read the checkboxes states from the local storage, we reflect the read data on the DOM d3.selectAll(".box").each(function(){ if(checkboxes.hasOwnProperty(this.id)){ this.checked = checkboxes[this.id].checked; } }); }; // on application load, read the storage readStorage(); // bind the update function to its trigger button d3.select("#update").on("click", updateStorage); // update the `checkboxes` variable whenever user makes changes in selections d3.selectAll(".box").on("change", function(){ if(checkboxes.hasOwnProperty(this.id)){ // update existing entry checkboxes[this.id].checked = this.checked; }else{ // add new entry and set its state checkboxes[this.id] = { "checked": this.checked }; } });

所以你去吧。

在localStorage

2 个答案:

全部放在一起