localstorage.aaa和localstorage.setitem('aaa')两种赋值方式有什么区别？

Question

localStorage.aaa = 'aaa'
localStorage.setItem('bbb', 'bbb')

两种写法有什么区别吗？哪种兼容性好

Answer 1

两者用于设置localStorage的键值对，区别在于语法方式不同。

• localStorage.aaa = 'aaa' 使用的是对象属性的形式，将值直接存储在localStorage上，相当于调用了setItem('aaa', 'aaa')方法。但是无法处理异常情况，如存储失败时没有错误提示。
• localStorage.setItem('bbb', 'bbb') 使用setItem(key, value)设置，提供了错误处理和兼容性。

两种写法在结果上没有区别，但是建议使用localStorage.setItem(key, value)的方式进行操作, 该方法兼容性更好

Answer 2

没区别，一样的

Answer 3

localStorage.aaa = 'aaa' 和 localStorage.setItem('aaa', 'aaa') 是一样的。

只不过考虑可读性的话，最好通过 get 和 set 的方式走 👉 #在存储中设置值 - 使用 Web Storage API - Web API 接口参考 | MDN
特别是经常会有人在业务代码中里面写错判断，比如说 if (localStorage.aaa = 'aaa') 就可能会被修改到，使用 get、set 的方式就可以避免：

const flag = localStorage.getItem('aaa')
if(flag = 'ABC') {
  ...
// Uncaught TypeError: Assignment to constant variable.

// 或者通过 var 的形式声明
var flag = localStorage.getItem('aaa')
if(flag = 'ABC') {
  ....
}
conso.log(localStorage.getItem('aaa'))
// 'aaa'