为什么 localStorage["..."] 未定义，但 localStorage.getItem("...") 为空？答案

【问题标题】：Why is localStorage["..."] undefined, but localStorage.getItem("...") is null?为什么 localStorage["..."] 未定义，但 localStorage.getItem("...") 为空？
【发布时间】：2015-04-08 15:51:46
【问题描述】：

上次查看，下面两行返回true：

null == localStorage["foo"];
null == localStorage.getItem("foo");

将null 替换为undefined 时同样适用。那么第一个问题是，为什么有两种方式来寻址localStorage呢？为什么会这样

localStorage["foo"]

同时返回undefined

localStorage.getItem("foo")

返回null?

在开发 JS 时需要注意这些吗？

【问题讨论】：

啊，Javascript的乐趣。
@RobertHarvey 语言很好，是实现变体杀死了它:(
当然，无论它返回undefined 还是null，您仍然需要处理它。为什么不同时检查两者？另见programmers.stackexchange.com/a/268125
@RobertHarvey，如有必要，我会这样做，但我想避免不必要的开销，这就是为什么像这样的问题困扰我的原因。如果再次检查 null 时未定义的东西总是返回 true，我为什么要（另外）检查它是否未定义？
请参阅下面的 muchweb 答案。另外，请检查我在上面发布的链接；使用 == 和 null 还会检查 undefined。

标签： javascript null local-storage undefined

【解决方案1】：

.getItem() 为未知键返回 null 的 Web Storage Specification requires。

但请注意，.getItem() 和 .setItem() 在 IDL 中专门定义为指定的 getter 和 setter 用于 Storage 接口，因此它们也是完全支持的访问内容的方式存储空间。

不过，[] 语法更类似于普通的对象和/或数组属性 getter，并且像那些返回 undefined 的未知属性名称一样。

不使用[]语法的原因是它会首先对对象属性进行操作，并且会很高兴地允许您覆盖localStorage对象的真实属性和方法，c.f:

> localStorage['getItem'] = function() { return 0 }
> localStorage.getItem('getItem')
0

【讨论】：

最后关于覆盖“真实”localStorage 属性的声明是否仍然适用？截至今天，我无法重现这个（在 Firefox 开发者版中）。执行你的代码给了我"function () { return 0 }"。
@jaySon 在当前的 Chrome (51.0.2704.79) 上它仍然返回零。
@jaySon 和 Chrome 55.0.2883.95 一样
@jaySon 仍然使用 Chrome 68.0.3440.106

【解决方案2】：

localStorage["..."] 对本地存储的使用无效。您正在尝试访问 localstorage 对象的方法，而不是访问实际的数据库。

你必须使用

localStorage.getItem("...")

和

localStorage.setItem("...")

访问存储数据库的方法。

【讨论】：

但是你可以“交叉使用”这两种语法。使用setItem() 设置某些内容并使用[] 获取它的效果与反之亦然。
确实——在我的 Chrome (41?) 上，当前键都出现在 Object.keys(localStorage) 中。 .getItem 显然更安全，但很难说 [] 方法无效。
@jaySon 使用 localStorage['foo'] = 'bar'; 不应该返回错误，它只是在 localStorage 对象中创建一个项目
很抱歉，我看不出使用这两种语法创建的项目之间有什么区别。它们的外观和行为完全相同，那么“它只是创建一个项目”是什么意思？
@vihan1086 这显然是不正确的。如果我写 localStorage['foo'] = 'bar' then not only can I inspect that value in my debugger, but the .length` 属性也会改变，最重要的是这个值会在我的浏览器中持续存在！

【解决方案3】：

在 javascript 中，对于对象内部不存在的键，您总是会得到一个 undefined 值。

a = {}; //new object
alert(a["test"]); // you get 'undefined' because "test" keys is not found

在 localStorage 中，.getItem 是一种检查 localStorage 对象内的键并在未找到时返回 null 的方法。

不要怪 javascript，这只是 localStorage 对象的行为

【讨论】：