在localStorage中选择一系列键/值对

Question

这是一篇自我学习的文章。

我的任务:

我有一本一万五千项的字典。用户可以通过选中与每个字典条目相关的复选框来选择是否显示条目。

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

复选框的状态通过以下两种方式之一存储在localStorage中:

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

和复选框设置为:checked，如果它们的相关键配对为"true"。

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

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

Answer 1

我将如何构建数据(不严格):

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
        };
    }
});

就这样了

Answer 2

已修改。目的是将多个已选中的复选框重置为未选中，并将更改保留在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);
      });
};