javascript - localStorage.property 与 localStorage ['property' ]

Question

编写localStorage['key'] = value或localStorage.setItem('key', value)有区别吗？

我看到了this question标记为重复，但在开发人员工具中，两种表示法的行为不同:括号表示法似乎没有序列化为字符串。

例如:

> 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 - use getItem/setItem functions or access object directly? - 您可以使用与 getItem/setItem 相同的方式使用属性。两种方式都会自动对值进行字符串化。

除非……
您正在使用 predefined methods 之一' 名称，例如 .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