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);

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

Answer 2

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

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

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

Answer 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。

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

如何附加到HTML5 localStorage？

4 个答案: