localStorage.getItem（'item'）优于localStorage.item或localStorage ['item']？(Is localS

localStorage.getItem（'item'）优于localStorage.item或localStorage ['item']？(Is localStorage.getItem('item') better than localStorage.item or localStorage['item']?)

我最近问了一个关于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'] OR只要他们工作的是速记符号呢？

I recently asked a question about LocalStorage. Using JSON.parse(localStorage.item) and JSON.parse(localStorage['item']) weren't working to return NULL when the item hadn't been set yet.

However, JSON.parse(localStorage.getItem('item') did work. And it turns out, JSON.parse(localStorage.testObject || null) also works.

One of the comments basically said that localStorage.getItem() and localStorage.setItem() should always be preferred:

The getter and setter provide a consistent, standardised and crossbrowser compatible way to work with the LS api and should always be preferred over the other ways. -Christoph

I've come to like using the shorthand dot and bracket notations for localStorage, but I'm curious to know others' take on this. Is localStorage.getItem('item') better than localStorage.item or localStorage['item'] OR as long as they work are the shorthand notations okay?

最满意答案

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

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

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

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

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

特别要注意的是，第一个语句不会影响localStorage.length的属性（除非localStorage.length中没有没有密钥'length'否则增加它）。 在这方面，规范似乎在内部不一致。

但是，以下可能不会做你想要的：

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

有趣的是，第一个是Chrome中的无效，但是在Firefox中的功能调用是同义词。 第二个将始终记录localStorage存在的密钥数。

^* _{首先支持网络存储的浏览器也是如此。 （这包括几乎所有现代的桌面和移动浏览器。）对于使用Cookie或其他技术模拟本地存储的环境，行为取决于所使用的垫片。 这里可以找到几个用于localStorage 。}

Both direct property access (localStorage.item or localStorage['item']) and using the functional interface (localStorage.getItem('item')) work fine. Both are standard and cross-browser compatible.^* According to the spec:

The supported property names on a Storage object are the keys of each key/value pair currently present in the list associated with the object, in the order that the keys were last added to the storage area.

They just behave differently when no key/value pair is found with the requested name. For example, if key 'item' does not exist, var a = localStorage.item; will result in a being undefined, while var a = localStorage.getItem('item'); will result in a having the value null. As you have discovered, undefined and null are not interchangeable in JavaScript/EcmaScript. :)

EDIT: As Christoph points out in his answer, the functional interface is the only way to reliably store and retrieve values under keys equal to the predefined properties of localStorage. (There are six of these: length, key, setItem, getItem, removeItem, and clear.) So, for instance, the following will always work:

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

Note in particular that the first statement will not affect the property localStorage.length (except perhaps incrementing it if there was no key 'length' already in localStorage). In this respect, the spec seems to be internally inconsistent.

However, the following will probably not do what you want:

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

Interestingly, the first is a no-op in Chrome, but is synonymous with the functional call in Firefox. The second will always log the number of keys present in localStorage.

^* _{This is true for browsers that support web storage in the first place. (This includes pretty much all modern desktop and mobile browsers.) For environments that simulate local storage using cookies or other techniques, the behavior depends on the shim that is used. Several polyfills for localStorage can be found here.}