localStorage - 使用 getItem/setItem 函数或直接访问对象？

Posted 2023-03-05

【中文标题】localStorage - 使用 getItem/setItem 函数或直接访问对象？

【英文标题】：localStorage - use getItem/setItem functions or access object directly?

【发布时间】：2012-10-17 01:27:34

【问题描述】：

使用定义在 localStorage 对象上的方法与直接访问对象属性相比有什么好处吗？例如，而不是：

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

我一直在这样做：

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

这有什么问题吗？

【问题讨论】：

我相信它们完全一样。

localStorage 是全局的，所以如果你想多次访问它，你应该将属性缓存在本地变量中。

@GurpreetSingh 嗯？这与问题有什么关系

抱歉，我的意思是 localStorage 是全局的，所以我猜如果你想多次访问它，提供的函数可能具有性能优势。

Square bracket syntax vs functions for localStorage 的可能重复项

【参考方案1】：

不是真的，它们基本上完全一样。一种使用封装（getter/setter）来更好地保护数据和简单的使用。你应该使用这种风格（为了安全）。

当名称（键）未知以及数组和循环时，另一个允许更好的使用。使用 .key() 和 .length 在不知道它们的实际键名的情况下遍历您的存储项。

我发现这是一个很棒的资源：@​​987654321@

这个问题也可能为某些人提供更多见解：html5 localStorage key order

附录：

显然，封装存在一些混淆。快速查看Wikipedia。但说真的，我希望这个网站的用户知道如何用谷歌搜索。

继续说下去，封装是指您制作小的进出门户以与另一个系统进行通信。假设您正在制作一个API 包供其他人使用。假设您在该 API 系统中有一组信息，这些信息会通过用户输入进行更新。您可以让 API 的用户直接将该信息放入数组中……使用 array[key] 方法。或者你可以使用封装。获取将其添加到数组的代码并将其包装在一个函数（例如，setArray() 或 setWhateverMakesSense() 函数）中，您的 API 用户调用该函数以添加此类信息。然后，在这个set 函数中，您可以检查数据是否存在问题，您可以以正确的方式将其添加到数组中，以防您需要将pushed 或shifted 以某种方式添加到数组中。 ..等等。 您控制用户输入如何进入实际程序。因此，它本身不会增加安全性，但允许您（API 的作者）编写安全性。这也允许更好的版本控制/更新，因为如果您决定进行内部更改，您的 API 用户将不必重写代码。但无论如何，这是好的OOP 所固有的。

（因此，在下面回应 Natix 的评论...）

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

PT

【讨论】：

正如我所说，一个使用封装（getter/sitter）......所以这应该是显而易见的......它的功能以“get”或“set”开头......如果你理解封装。另一种是使用.key()和.length进行迭代的方式。

那么这些方法究竟如何更好地保护数据并提高安全性如果它们基本上完全相同?

我不确定缺少该信息是否值得投反对票。这里。看到OP没有要求它。正如我所说，答案是......不是真的。这两种javascript方式没有任何真正的本质安全差异。将所有内容发送到函数（封装）的命名法允许该事务的门户。如果你愿意，你可以重写那个门户......这是远远超出这个上下文的东西。但应该很明显，如何使用这种控制水平来提高安全性。假设你知道封装，这一切都是显而易见的。

【参考方案2】：

只要您不使用像 window.localStorage.key 这样的“点符号”，您可能就可以了，因为它在 Windows Phone 7 中不可用。我没有使用括号进行测试（您的第二个示例）。就我个人而言，我总是使用 set 和 get 函数（你的第一个例子）。

【参考方案3】：

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

【讨论】：

在使用 localstorage 时，应始终使用 try/catch 块包装 JSON.parse，因为返回的值不可靠且可能无法解析

【参考方案4】：

我认为它们完全相同，documenation 声明的唯一内容是：

注意：虽然可以使用标准设置和读取值 JavaScript 属性访问方法，使用 getItem 和 setItem 推荐方法。

但是，如果使用完整的垫片，则说明：

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

和有限的垫片：

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

【讨论】：

不完全一样，getter 返回 null 而直接对象属性返回 undefined 丢失键