如何追加到 HTML5 localStorage?

发布于 2024-12-08 13:41:27 字数 586 浏览 0 评论 0原文

我执行了

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

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

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

因此,如果我在文本框中输入 apples,然后输入 oranges,我的 localStorage 键 oldData 应该如下所示:

最初:

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

现在:

oldData  |  apples oranges

我怎样才能附加? 是否提供了append方法?

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

I do a

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

to set the value of key oldData to the value in a textbox.

The next time something is entered to the textbox, I want to append to the already existing oldData.

So, if I enter apples and then oranges in my textbox, my localStorage key oldData should look like this:

Initially:

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

Now:

oldData  |  apples oranges

How can I append? Is there an append method provided?

Or do I need to read the data first, append in javascript and then write back?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

蹲在坟头点根烟 2024-12-15 13:41:27

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

There's no append function. It's not hard to write one though:

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

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

Note: It makes more sense to define a function append on the localStorage object. However, because localStorage has a setter, this is not possible. If you were trying to define a function using localStorage.append = ..., the localStorage object will interpret this attempt as "Save an object called append in the Storage object".

一枫情书 2024-12-15 13:41:27

这不是一个好的解决方案,但它有效且高效。

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

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

It is not a good solution but it works and is performative.

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

localStorage.setItem("fruit", localStorage.getItem("fruit") + "Orange");
酷炫老祖宗 2024-12-15 13:41:27

我发现这个这里

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

I found this 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();
};

Seems like it only has getItem,setItem,removeItem,clear,key and length.

嘿哥们儿 2024-12-15 13:41:27

从技术上讲,您可以通过将索引号分配给键名称来完成此操作。
如果您有一个巨大的数据字符串要保存,您可以节省自己读取和写入整个字符串历史记录到存储的时间,只需使用新数据推进索引名称编号即可。像这样的东西。

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

Technically, you could do this by assigning index numbers to the key name.
If you had a HUGE string of data to save, you could save yourself reading and writing the entire string history to the storage and just advance the index name number with the new data. Something like this.

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
}

This would add the first available index number to the end of the key value, thereby creating a new entry. I would also keep track of the current index number to avoid reading all of the entries, or get the localStorage.length variable.
The table would look like this

enter image description here

Then you could retrieve the key array like so.

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

I added V to the end of the functions to distinguish that we are building vertical arrays in the storage grid.

Now we can simply do this to append and recall the data by it's name.

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

You could then access your data just like an array. Get and set values at certain indexes, pop from the end of the array etc. Keep in mind, this creates a new entry every time you append. Rebuilding the index numbers could get expensive if you had to reorder the list as well. Also, I don't know how many keys you can safely generate before you slow down the browser or hit a [max_keys] limit.
But at least you don't have to constantly read and write the entire list of a HUGE string of data every time as it's only writing the new data. I've never tested this with any large amounts of entries, so I'd be careful with this approach.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文