localStorage.getItem('item')比localStorage.item还是localStorage 好?

我最近问了一个关于LocalStorage的问题 。 当项目尚未设置时,使用JSON.parse(localStorage.item)JSON.parse(localStorage['item'])不能返回NULL

但是, JSON.parse(localStorage.getItem('item')确实起作用。事实certificate, JSON.parse(localStorage.testObject || null)也可以。

其中一个评论基本上说, localStorage.getItem()localStorage.setItem()应该始终是首选的:

getter和setter提供一致的,标准化的和crossbrowser兼容的方式来处理LS api,应该始终优于其他方式。 – 克里斯托夫

我已经开始喜欢使用localStorage的简写点和括号,但我很想知道别人对此的看法。 是localStorage.getItem('item')好于localStorage.item或localStorage ['item']或只要他们的工作是速记符号好吗?

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

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

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

编辑:正如克里斯托弗在他的答案指出,function接口是唯一的方法来可靠地存储和检索下的键等于localStoragelengthkeysetItemgetItemremoveItemclear )的预定义属性的值。 所以,例如,以下将始终工作:

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

尤其需要注意的是,第一条语句不会影响localStorage.length属性(除非在localStorage已经有'length' key 'length'了,否则可能会增加它)。 在这方面,规范似乎在内部是不一致的。

但是,以下可能不会做你想要的:

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

有趣的是,第一个是Chrome中没有任何操作,但是与Firefox中的function调用是同义的。 第二个将始终logginglocalStorage存在的密钥数量。

* 对于首先支持Web存储的浏览器来说,这是正确的。 (这几乎包括所有现代桌面和移动浏览器。)对于使用cookie或其他技术来模拟本地存储的环境,其行为取决于使用的垫片。 几个localStorage可以在这里find。

这个问题已经很老了,但是因为我已经提到了这个问题,所以我觉得我应该说两句话。

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

例如,它具有length属性,该属性将数组lenght属性取消为只读,并返回存储中的键数。

有了一个数组,你可以这样做:

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

这里我们有第一个使用getters / setters的理由。 如果你想设置一个称为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()方法必须是primefaces的 。 在失败的情况下,该方法什么都不做。 也就是说,数据存储区的更改必须是成功的,否则数据存储区一定不能改变。

我还没有testing过,但我想这不适用于点或括号表示法。

我知道这是一个旧post,但由于没有人提到性能,我设置了一些JsPerftesting来进行基准testing,并且作为一个连贯的接口getItemsetItem也比使用点符号或括号更快,并且更容易阅读。

这里是我对JsPerf的testing

如前所述,除了不存在的关键字之外几乎没有区别。 性能的差异取决于您使用的浏览器/操作系统。 但事实并非如此。

我build议你使用标准接口,只是因为它是一个推荐的使用方式。