localStorage.property vs 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