如何附加到 HTML5 localStorage？答案

【问题标题】：How to append to HTML5 localStorage?如何附加到 HTML5 localStorage？
【发布时间】：2021-03-04 17:11:35
【问题描述】：

我做一个

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

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

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

所以，如果我在文本框中输入 apples，然后输入 oranges，我的 localStorage 密钥 oldData 应该如下所示：

最初：

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

现在：

oldData  |  apples oranges

如何追加？ 是否提供了append 方法？

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

【问题讨论】：

您可以检索键的当前值，然后添加新值...
@Cristy：所以localStorage API 没有提供附加功能？
我不知道，从未使用过，但在有人发布“附加”方法之前，这可能有效:)

标签： javascript html local-storage

【解决方案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 的对象”。

【讨论】：

我想我在这里发现了一个错误，我不确定 OP 想要写入 localStorage 的内容，但由于您需要使用 JSON 语法，请确保您正确分离 你的对象、数组等localStorage.setItem(name, old + data); 与一个简单的+ 连接可能会欺骗你。
@KovácsImre localStorage 只存储字符串，这正是 OP 想要的，所以 localStorage.setItem(name, old + data); 是正确的。如果要存储非字符串，则需要自定义（反）序列化方法。 JSON 语法是实现这一点的便捷方式，但绝不是必需的。
这样的话，是真的。
@RobW 我已经保存了。
你能解释一下为什么他们称它为 html5 storage 吗？这不是浏览器的功能吗？

【解决方案2】：

这不是一个好的解决方案，但它可以工作并且可以执行。

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

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

【讨论】：

对不起。已经明白他想要不管哪种方式的信息存储（html日期localStorage、javascript变量等）。所以建议使用html日期，因为与javascript变量相比，建议使用该方法以获得更好的性能。

【解决方案3】：

我找到了这个here：

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。

【讨论】：

【解决方案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] 限制之前可以安全地生成多少键。但至少你不必每次都不断地读取和写入一个巨大的数据字符串的整个列表，因为它只是在写入新数据。我从来没有用任何大量的条目测试过这个，所以我会小心这种方法。

【讨论】：