localStorage.getItem（'item'）是否优于localStorage.item或localStorage ['item']？

Question 1

我最近问了一个有关LocalStorage的问题。尚未设置项目时，使用JSON.parse(localStorage.item)和JSON.parse(localStorage['item'])无法返回NULL。

但是，JSON.parse(localStorage.getItem('item')确实可行。事实证明，这JSON.parse(localStorage.testObject || null)也是可行的。

一位评论基本上说，localStorage.getItem()并localStorage.setItem()应始终优先考虑：

getter和setter提供了一种与LS api兼容的一致，标准化和跨浏览器兼容的方式，并且始终应优先于其他方式。-克里斯托夫

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

Question 2

既可以直接访问属性（localStorage.item或localStorage['item']）和使用功能接口（localStorage.getItem('item')）都可以正常工作。两者都是标准的和跨浏览器兼容的。^*根据规格：

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

当找不到带有所请求名称的键/值对时，它们的行为就不同。例如，如果密钥'item'不存在，var a = localStorage.item;将导致a存在undefined，而var a = localStorage.getItem('item');将导致a具有value null。如您所知，undefined并且null在JavaScript / EcmaScript中不可互换。:)

编辑：正如Christoph在他的答案中指出的那样，功能接口是可靠地存储和检索等于的预定义属性的键下的值的唯一方法localStorage。（其中有六个：length，key，setItem，getItem，removeItem，和clear。）所以，举例来说，下面将始终工作：

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

请特别注意，第一个语句不会影响物业localStorage.length（如果没有按键，除了可能增加它'length'已经localStorage）。在这方面，该规范似乎在内部不一致。

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

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

有趣的是，第一个是Chrome中的no-op，但与Firefox中的功能调用同义。第二个将始终记录中显示的键数localStorage。

^* _{对于首先支持网络存储的浏览器而言，这是正确的。（这几乎包括所有现代台式机和移动浏览器。）对于使用Cookie或其他技术模拟本地存储的环境，其行为取决于所使用的填充程序。localStorage可以在此处找到几种填充料。}

Question 3

这个问题已经很老了，但是由于已经在问题中被引用了，所以我想对我的发言说两个字。

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

例如，它具有length属性，与array length属性不同，该属性为只读，并返回存储中的键数。

使用数组，您可以执行以下操作：

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

在这里，我们有第一个使用吸气剂/设置器的理由。如果要设置一个名为的项目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和[]访问之间应该没有区别，但是您永远不知道...

Question 4

我知道这是一个过时的文章，但是由于没有人真正提到性能，因此我建立了一些JsPerf测试来对其进行基准测试，并使其成为一个连贯的界面，getItem并且setItem比使用点符号或方括号始终保持更快的速度，并且易于阅读。

这是我在JsPerf上的测试

Question 5

如前所述，除了不存在的密钥外，几乎没有任何区别。在性能差而变化取决于/ OS，你使用的是什么浏览器。但这并没有那么大的不同。

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