如何追加到 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 对象将将此尝试解释为“保存一个名为 的对象”追加到存储对象中”。

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 和长度。

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] 限制之前可以安全生成多少个密钥。
但至少您不必每次都不断地读取和写入巨大数据字符串的整个列表，因为它只是写入新数据。我从未使用大量条目对此进行过测试，因此我会谨慎使用这种方法。