localStorage.property诉localStorage['property']

Question

写localStorage['key'] = value和localStorage.setItem('key', value)有什么区别吗？

我看到这个问题标记为重复，但在开发人员工具中，这两个符号的行为是不同的:括号符号似乎不序列化为字符串。

例如：

> localStorage['key'] = [1,2,3]
[1, 2, 3]
> localStorage.setItem('other', [4,5,6])
undefined
> localStorage.key
[1, 2, 3]
> localStorage.other
"4,5,6"
> localStorage.key.length
3
> localStorage.other.length
5

有谁能解释行为上的差异吗？我是否可以使用括号表示法而忘记总是序列化到JSON？

Answer 1

通常，请参阅localStorage -直接使用getItem/setItem函数还是访问对象？ --您可以使用与getItem/setItem相同的属性。这两种方法都将自动压缩值。

除非…

您使用的是预定义方法的一个名称，比如.key()。这是自找麻烦。

• Opera和Firefox将将值存储在localStorage中，并在随后访问.key时返回字符串。
• 另一方面，Chrome只会覆盖localStorage对象上的方法。不会产生张力，你只会得到你放在那里的物体。它不会被储存起来。

​

> localStorage.key
function(){ … }
> localStorage.key = [1,2,3]
[1,2,3] // the rvalue

Opera> localStorage.key
"1,2,3"
Opera> localStorage.length
1

Chrome> localStorage.key
[1,2,3]
Chrome> localStorage.length
0