如何附加到 HTML5 localStorage？

Question

我做一个

localStorage.setItem('oldData', $i("textbox").value);

将键oldData的值设置为文本框中的值。

下次在文本框中输入内容时，我想附加到已经存在的oldData 。

因此，如果我在文本框中输入apples和oranges ，我的 localStorage 键oldData应如下所示：

最初：

Key      |   Value
---------------------------
oldData  |  apples

现在：

oldData  |  apples oranges

我怎样才能追加？ 是否提供了append方法？

还是我需要先读取数据，在 javascript 中追加然后写回？

Answer 1

没有append功能。 不过写一个也不难：

function appendToStorage(name, data){
    var old = localStorage.getItem(name);
    if(old === null) old = "";
    localStorage.setItem(name, old + data);
}

appendToStorage('oldData', $i("textbox").value);

注意：在localStorage对象上定义一个函数append更有意义。 但是，因为localStorage有一个setter ，这是不可能的。 如果您尝试使用localStorage.append = ...定义函数，则localStorage对象会将这种尝试解释为“在存储对象中保存名为append的对象” 。

Answer 2

这不是一个好的解决方案，但它有效并且具有执行力。

localStorage.setItem("fruit", "Apples"); 

localStorage.setItem("fruit", localStorage.getItem("fruit") + "Orange");

Answer 3

我在这里找到了这个：

interface Storage {
  readonly attribute unsigned long length;
  DOMString? key(unsigned long index);
  getter DOMString getItem(DOMString key);
  setter creator void setItem(DOMString key, DOMString value);
  deleter void removeItem(DOMString key);
  void clear();
};

似乎它只有 getItem、setItem、removeItem、clear、key 和 length。

Answer 4

从技术上讲，您可以通过为键名分配索引号来做到这一点。
如果你有一大串数据要保存，你可以省去自己读取和写入整个字符串历史到存储的工作，只需用新数据推进索引名称编号。 像这样的东西。

function AppendToLocalStorageV(name, value) {
    let n = 0;
    while (localStorage.getItem(name + n)) {
        n++;
    }
    localStorage.setItem(name + n, value); //add item at first available index number
}

这会将第一个可用索引号添加到键值的末尾，从而创建一个新条目。 我还会跟踪当前的索引号以避免读取所有条目，或者获取 localStorage.length 变量。 桌子看起来像这样

然后你可以像这样检索键数组。

function GetLocalStorageV(name) {
    let n = 0;
    let data = [];
    while (localStorage.getItem(name + n)) {
        data.push(localStorage.getItem(name + n++));
    }
    return data;
}

我在函数末尾添加了 V 以区分我们正在存储网格中构建垂直阵列。

现在我们可以简单地通过它的名称来附加和调用数据。

AppendToLocalStorageV("oldData", "apples");    
AppendToLocalStorageV("oldData", "oranges");
AppendToLocalStorageV("oldData", "bananas");
var oldData = GetLocalStorageV("oldData");  //returns an array with [apples,oranges,bananas]

然后您可以像访问数组一样访问您的数据。 在某些索引处获取和设置值，从数组的末尾弹出等。请记住，每次追加时都会创建一个新条目。 如果您还必须对列表重新排序，则重建索引号的成本可能会很高。 此外，我不知道在降低浏览器速度或达到 [max_keys] 限制之前，您可以安全地生成多少个密钥。 但至少你不必每次都不断地读取和写入一个巨大的数据字符串的整个列表，因为它只是在写入新数据。 我从来没有用任何大量的条目测试过这个，所以我会小心这种方法。