如何追加到 HTML5 localStorage?
我执行了
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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
没有
append
功能。不过,编写一个并不难:注意:在
localStorage
对象上定义一个append
函数更有意义。 但是,因为localStorage
有一个setter
,这是不可能的。如果您尝试使用localStorage.append = ...
定义函数,localStorage
对象将将此尝试解释为“保存一个名为的对象”追加到存储对象中”。
There's no
append
function. It's not hard to write one though:Note: It makes more sense to define a function
append
on thelocalStorage
object. However, becauselocalStorage
has asetter
, this is not possible. If you were trying to define a function usinglocalStorage.append = ...
, thelocalStorage
object will interpret this attempt as "Save an object calledappend
in the Storage object".这不是一个好的解决方案,但它有效且高效。
It is not a good solution but it works and is performative.
我发现这个这里:
似乎它只有 getItem、setItem、removeItem、clear、key 和长度。
I found this here :
Seems like it only has getItem,setItem,removeItem,clear,key and length.
从技术上讲,您可以通过将索引号分配给键名称来完成此操作。
如果您有一个巨大的数据字符串要保存,您可以节省自己读取和写入整个字符串历史记录到存储的时间,只需使用新数据推进索引名称编号即可。像这样的东西。
这会将第一个可用索引号添加到键值的末尾,从而创建一个新条目。我还会跟踪当前索引号以避免读取所有条目,或获取 localStorage.length 变量。
该表看起来像这样
然后您可以像这样检索密钥数组。
我在函数末尾添加了 V,以区分我们正在存储网格中构建垂直数组。
现在我们可以简单地执行此操作以按名称附加和调用数据。
然后您可以像访问数组一样访问数据。获取和设置某些索引处的值,从数组末尾弹出等。请记住,每次追加时都会创建一个新条目。如果您还必须对列表进行重新排序,那么重建索引号的成本可能会很高。另外,我不知道在减慢浏览器速度或达到 [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.
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
Then you could retrieve the key array like so.
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.
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.