Question

如何附加到 HTML5 localStorage？

2011-10-06

28028

javascript html local-storage

我执行了

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 对象会将此尝试解释为 “在 Storage 对象中保存一个名为 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。