将项目添加/附加到localstorage/web存储中？

Question

我知道localstorage只是一个带getItem和setItem的简单哈希映射.如果我的Item是JSON数组并且我只想在数组的末尾添加一个项,该怎么办？是否有更有效的方式,而不是再setItem要一次入境？

Answer 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在用户导航离开当前页面时订阅该事件以进行最终写入.