localStorage.getItem('item')与localStorage.item的区别及性能对比

核心区别 #

• 键名兼容性不同
  如果存储的键名是JavaScript保留字（如class、function）、包含特殊字符（如my-item、user name）或以数字开头（如123_data），直接用点访问会报错或无法正确取值。比如localStorage.my-item会被解析成减法运算，完全不符合预期；而getItem可以直接传入任意合法字符串键名，比如localStorage.getItem('my-item')就能正常获取值。

• 动态键名支持不同
  当键名是变量时，getItem可以直接传入变量，比如：

  const key = 'user_id';
  const value = localStorage.getItem(key);
  

  而直接用点访问的话，必须改用方括号语法localStorage[key]，如果写localStorage.key，只会去查找名为key的固定属性，而非变量对应的键名。

• 不存在键的返回值不同
  访问不存在的键时，getItem会返回null，而直接点访问会返回undefined。这在做存在性判断时需要注意：比如if (localStorage.getItem('non_exist'))和if (localStorage.non_exist)都会被判定为false，但如果存储的值是字符串'null'或'undefined'，两者的返回结果就会有明显差异。

性能差异 #

实际使用中，两者的性能差异可以忽略不计。虽然理论上属性访问（点语法）比方法调用（getItem）少一层函数调用的开销，但localStorage本身是同步的磁盘存储操作，每次访问的主要开销来自浏览器与存储层的交互，这个开销远大于属性访问和方法调用的细微差别。除非你在极端场景下（比如每秒上万次的存储访问），否则完全不用纠结性能，优先根据业务场景选择合适的方式即可。

内容的提问来源于stack exchange，提问作者namename