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

Question

我最近问了一个关于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'更好,或者只要它们工作的是速记符号好吗？

Answer 1

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

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

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

编辑:如在克里斯托弗指出他的回答,功能接口是可靠地存储并在等于所述预定义的属性键检索值的唯一方法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中的无操作,但它与Firefox中的函数调用同义.第二个将始终记录存在的键数localStorage.

^* _{首先支持Web存储的浏览器也是如此.(这包括几乎所有现代桌面和移动浏览器.)对于使用cookie或其他技术模拟本地存储的环境,行为取决于所使用的垫片.localStorage可以在这里找到几种填充物.}

Answer 2

这个问题已经很老了,但既然我已经引用了这个问题,我想我应该对我的陈述说两句话.

存储对象相当特殊,它是一个对象,可以访问键/值对列表.因此,它不是普通的对象或数组.

例如,它具有length属性,与数组长度属性不同,它是readonly并返回存储中的键数.

使用数组,您可以:

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和[]访问之间应该没有区别,但你永远不会知道......