将项目添加/追加到本地存储/网络存储？答案

【问题标题】：Add/Append item into localstorage/web storage?将项目添加/追加到本地存储/网络存储？
【发布时间】：2013-06-28 17:40:28
【问题描述】：

我知道 localstorage 只是一个带有getItem and setItem 的简单哈希映射。如果我的 Item 是 JSON 数组，而我只想在数组末尾添加一项怎么办？有没有比调用setItem 多一个条目更有效的方法？

【问题讨论】：

标签： html local-storage web-storage

【解决方案1】：

很遗憾没有。

localStorage 仅支持 string 类型，因此您必须在保存之前对数组进行 JSON.stringify，这意味着您需要先加载并解析它，然后才能添加任何内容。

您可以编写一个简单的包装器来执行此操作（可以支持各种类型）：

function appendItem(key, data) {

    var t = data.constructor, tmp;

    switch(t) {

         case Array:
             tmp = localStorage.getItem(key);
             tmp = (tmp === null) ? [] : JSON.parse(tmp);
             tmp.push(data);

             localStorage.setItem(key, JSON.stringify(tmp));
             break;

         case String:
             //... and so forth
    }
}

（这种方法还必须实现错误和同类型检查）。

您可以选择使用延迟写入方法，以便更有效地填充数组（突发写入），并且仅在需要时将数据更新为localStorage。在这里，您可以先加载现有数组，然后在向其中添加数据时对其进行更新。

您可以将其烘焙到每个数组的对象中，但为简单起见：

var a = []; //load existing array at init
var timer;
var key = 'myArray';

//append data to array and re-start timer
function appendArray(item) {

    clearTimeout(timer);
    a.push(item);

    timer = setTimout(writeData, 2000); //wait 2 seconds to write last append(s)
}

//write the data if dirty
function writeData() {
    localStorage.setItem(key, JSON.stringify(a));
}

为了安全起见，您可以订阅window.onunload 事件以在用户离开当前页面时进行最终写入。

【讨论】：