localStorage.getItem('item') 是否优于 localStorage.item 或 localStorage['item']？

Question

我最近问过a question about LocalStorage。当项目尚未设置时，使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item']) 无法返回 NULL。

但是，JSON.parse(localStorage.getItem('item') 确实有效。事实证明，JSON.parse(localStorage.testObject || null) 也有效。

One of the comments 基本上说localStorage.getItem() 和localStorage.setItem() 应该总是首选：

getter 和 setter 提供了一致的、标准化的和 使用 LS api 的跨浏览器兼容方式，并且应该始终 优于其他方式。 -Christoph

我开始喜欢对 localStorage 使用速记点和括号表示法，但我很想知道其他人对此的看法。 localStorage.getItem('item') 是否比 localStorage.item 或 localStorage['item'] 更好，或者只要它们有效，速记符号就可以了吗？

Answer 1

直接属性访问（localStorage.item 或 localStorage['item']）和使用功能接口（@98​​7654326@）都可以正常工作。两者都是标准的和跨浏览器兼容的。^*根据the spec：

Storage 对象上支持的属性名称是当前存在于与该对象关联的列表中的每个键/值对的键，按照键最后添加到存储区域的顺序。

当没有找到具有请求名称的键/值对时，它们的行为会有所不同。例如，如果键 'item' 不存在，var a = localStorage.item; 将导致 a 为 undefined，而 var a = localStorage.getItem('item'); 将导致 a 具有值 null。正如您所发现的，undefined 和 null 在 JavaScript/EcmaScript 中不可互换。 :)

编辑： 正如 Christoph 在his answer 中指出的那样，函数式接口是在等于localStorage 的预定义属性的键下可靠地存储和检索值的唯一方法。 （其中有六个：length、key、setItem、getItem、removeItem 和 clear。）因此，例如，以下将始终有效：

localStorage.setItem('length', 2);
console.log(localStorage.getItem('length'));

请特别注意，第一条语句不会影响属性localStorage.length（除非在localStorage 中已经没有键'length' 时增加它）。在这方面，规范似乎在内部不一致。

但是，以下内容可能不会满足您的要求：

localStorage.length = 2;
console.log(localStorage.length);

有趣的是，第一个是 Chrome 中的无操作，但与 Firefox 中的函数调用同义。第二个将始终记录 localStorage 中存在的键数。

^*_{这对于一开始就支持网络存储的浏览器是正确的。 （这几乎包括所有现代桌面和移动浏览器。）对于使用 cookie 或其他技术模拟本地存储的环境，行为取决于所使用的 shim。 localStorage 的几个 polyfill 可以在 here 找到。}

Answer 2

我知道这是一篇旧帖子，但由于没有人真正提到性能，我设置了一些 JsPerf 测试来对其进行基准测试，并且作为一个连贯的接口 getItem 和 setItem 也始终比使用点符号或括号更快并且更容易阅读。

这是我的测试on JsPerf

Answer 3

如前所述，除了不存在的密钥之外几乎没有区别。 difference in performance varies 取决于您使用的浏览器/操作系统。但实际上并没有那么不同。

我建议你使用标准接口，只是因为它是一种推荐的使用方式。

Answer 4

这个问题已经很老了，但是既然我在问题中被引用了，我想我应该就我的陈述说两句话。

存储对象比较特殊，它是一个对象，提供对键/值对列表的访问。因此它不是一个普通的对象或数组。

比如它有length属性，不像数组length属性是只读的，返回存储中key的个数。

使用数组你可以做到：

var a = [1,2,3,4];
a.length // => 4
a.length = 2;
a // => [1,2]

这里我们有第一个理由使用 getter/setter。如果你想设置一个名为length的项目怎么办？

localStorage.length = "foo";
localStorage.length  // => 0
localStorage.setItem("length","foo");
// the "length" key is now only accessable via the getter method:
localStorage.length  // => 1
localStorage.getItem("length") // => "foo"

对于 Storage 对象的其他成员，这一点更为关键，因为它们是可写的，并且您可能会意外覆盖 getItem 等方法。使用 API 方法可以防止任何这些可能的问题，并提供一致的接口。

另外有趣的一点是规范中的以下段落（由我强调）：

setItem() 和 removeItem() 方法对于失败必须是原子的。 在失败的情况下，该方法什么也不做。即数据存储区的更改必须要么成功，要么根本不能更改数据存储区。

理论上，getter/setter 和[] 访问之间应该没有区别，但你永远不知道......