javascript-localStorage-使用getItem / setItem函数还是直接访问对象?

与直接访问对象属性相比,使用localStorage对象上定义的方法有一些好处吗? 例如,代替:

var x = localStorage.getItem(key);
localStorage.setItem(key, data);

我一直在这样做:

var x = localStorage[key];
localStorage[key] = data;

这有什么问题吗?

DisgruntledGoat asked 2020-06-27T14:23:42Z
4个解决方案
29 votes

实际上,它们不是完全一样的。 一种使用封装(getter / setter)来更好地保护数据并简化使用。 您应该使用这种样式(出于安全考虑)。

另一个允许在名称(键)未知以及数组和循环时更好地使用。 使用localStoragelocalStorage可以在不知道其实际键名的情况下遍历存储项。

我发现这是一个很好的资源:[http://diveintohtml5.info/storage.html]

这个问题可能还会为某些人提供更多的见解:HTML5 localStorage按键顺序

附录:

显然,关于封装存在一些困惑。 查看这个快速的Wikipedia。 但认真的说,我希望该站点的用户知道如何使用Google。

继续前进,封装是一种思想,即您很少使用与其他系统进行通讯的输入和输出门户。假设您正在制作供他人使用的API包。假设您在该API系统中拥有一系列信息,这些信息会通过用户输入进行更新。您可以使用localStorage方法使API的用户直接将该信息放入数组中。或者,您可以使用封装。采取将其添加到数组中的代码,然后将其包装到您的API用户调用以添加此类信息的函数(例如localStoragelocalStorage函数)中。然后,在此localStorage函数中,您可以检查数据是否有问题,可以按正确的方式将其添加到阵列中,以防以某种方式将pushed或shifted插入阵列中...等。您可以控制来自用户的输入如何进入实际程序。因此,它本身不会增加安全性,但允许由API的作者您编写安全性。这还允许更好的版本控制/更新,因为如果您决定进行内部更改,则API的用户将不必重写代码。但这无论如何都是好的OOP所固有的。

(因此,为了回应Natix在下面的评论...)

对于此处的javascript和localStorage对象,他们已经编写了此API,他们是作者,而我们是其用户。 如果作者决定更改localStorage的工作方式,则使用封装方法的情况下,不太可能需要重写代码。 但是我们都知道这种改变的可能性极不可能发生,至少不会很快发生。 而且由于作者在此处没有进行任何固有的不同安全检查,因此,目前,这两种使用localStorage的方式基本相同。 有点像垫片。 但是,我们可以轻松覆盖/替换localStorage周围的现有封装,以进行自己的安全检查。 因为JavaScript真是太棒了。

PT

Pimp Trizkit answered 2020-06-27T14:25:07Z
9 votes

我认为它们是完全一样的,文档中唯一说明的是:

注意:尽管可以使用标准设置和读取值 JavaScript属性访问方法,使用getItem和setItem 建议使用方法。

但是,如果使用完整的垫片,则说明:

使用方法localStorage.yourKey = yourValue; 并删除 localStorage.yourKey; 设置或删除密钥不是安全的方法 此代码。

和有限的垫片:

使用方法localStorage.yourKey来获取,设置或删除 此代码不允许使用密钥。

jbabey answered 2020-06-27T14:25:49Z
3 votes

我看到的最大好处之一是,我无需在JSON.parse()之前检查值是否未定义,因为getItem()返回NULL而不是undefined。

Hintron answered 2020-06-27T14:26:09Z
0 votes

只要您不使用window.localStorage.key之类的“点符号”,您就可以确定,因为Windows Phone 7中不提供该点。我没有用方括号(第二个示例)进行测试。 我个人总是使用set和get函数(第一个示例)。

helonaut answered 2020-06-27T14:26:30Z
translate from https://stackoverflow.com:/questions/13092715/localstorage-use-getitem-setitem-functions-or-access-object-directly