如何在JavaScript中使用localStorage详情

这篇文章主要介绍了如何在JavaScript中使用localStorage，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

如果你是一名开发人员，想要进入到.NET的世界，你需要知道都有哪些可能。由于.NET Framework是.NET生态系统中最流行的技术，你可以用它来构建各种各样的应用程序，但是最近，出现了一些新的东西，比如 .NET Core 和.NET Standard library。我们可以在项目或构建中使用它吗?

localStorage对象是web编程中应用最广泛的对象之一。它提供了在用户计算机上本地存储键值对的简单解决方案。

大多数web开发人员都喜欢localStorage API，因为它具有简单的语法并且可以存储高达5MB的数据。

除此之外，所有主流浏览器的最新版本都支持Web Storage API，其中包括localStorage和sessionStorage。只有Opera Mini不支持webstorage API。

你可以通过打开Chrome DevTools快速验证你的浏览器是否支持webstorage API。导航到“控制台”，键入下面的代码片段，并按enter键。

typeof(Storage)

如果你收到一个undefined ，那么你的浏览器不支持webstorage API。如果你的浏览器支持它，那么你应该看到“function”。

本文探讨了以下问题:

localStorage是什么?
localStorage和sessionStorage之间有什么区别?
如何使用localStorage API执行CRUD操作
常见的本地存储有什么坑?
localStorage的有什么限制?

localStorage是什么?

正如之前提到的，localStorage对象是浏览器本地支持的webstorage API的一部分。这是一个简单而有效的键/值存储解决方案。

对于web开发人员来说，使用localStorage对象的最大好处是可以脱机存储。最重要的是，当用户关闭浏览器或重启电脑时，我们不会丢失数据。即使在计算机重新启动后，网站仍然可以使用localStorage API读取本地存储在用户计算机上的数据。

这个解决方案为web开发人员提供了几个有趣的用例。

离线存储网站的用户设置
保留用户搜索历史
保留购物车里的物品

接下来，让我们比较localStorage和sessionStorage。

localStorage和sessionStorage之间有什么区别?

虽然这两个api看起来是相同的，但它们的执行方式有细微的差异。

localStorage API用于本地存储数据。因此，当用户刷新选项卡、关闭浏览器或重启计算机时，本地保存的数据不会丢失。它是长期存储基本数据的理想解决方案。

sessionStorage API在页面刷新后仍然有效，但只能在相同的选项卡中工作。

简而言之，在为应用程序选择存储解决方案时要注意。例如，最好的做法是将用户设置信息存储在localStorage中。相反，sessionStorage最适合为特定会话存储数据。

如何使用localStorage API执行CRUD操作

本节向你展示如何使用localStorage API进行添加、读取、更新或删除操作。在此基础上，我将向你展示一个清除特定页面localStorage的技巧。

首先，让我们在localStorage对象中创建一个新的键值对。setItem函数接受一个键及其值。为密钥选择一个合适的名称，你可能将使用该密钥名称再次进行检索。

				?

									localStorage.setItem(‘my-key', ‘some-value')

现在让我们再次检索新创建的对象。

				?

									let item = localStorage.getItem(‘my-key')

									console.log(item) // Output: “some-value”

这很简单。让我们继续更新my-key的值。注意，我们使用相同的setItem函数来覆盖它的值。

				?

									localStorage.setItem(‘my-key', ‘new-value')

最后，让我们删除这个键。removeItem函数接受一个参数，它就是想要删除的键。

				?

									localStorage.removeItem(‘my-key')

为了确保我们已经删除了所有键，让我们使用clear函数来清除存储在localStorage中应用程序的所有内容。

				?

									localStorage.clear()

现在，我们已经为更高级的localStorage操作做好了准备。

高级localStorage操作:遍历

让我们看看用于遍历localStorage对象和查找键的方法。

第一种方法使用了最直接的for循环。注意，我们可以直接在localStorage对象上使用length属性。

				?

									for(let i=0; i<localStorage.length; i++) {

									 let key = localStorage.key(i)

									 console.log(`${key} with value ${localStorage.getItem(key)}`)

									}

我们也可以直接使用key方法检索相应的键。

				?

									for (let i = 0; i < localStorage.length; i++){

									 let key = localStorage.key(i)

									 console.log(key)

									}

接下来，让我们看看在使用localStorage API时要避免的坑。

localStorage常见的坑

让我们看一下与localStorage API交互时最常见的两个坑。

首先，尝试存储一个JSON对象。localStorage API被设计为键-值对存储。因此，该值只接受字符串，不接受对象。然而，这并不意味着我们不能存储对象。我们需要将它序列化为一个字符串。

				?

									const dinner = { apples: 5, oranges: 1 }

									localStorage.setItem(‘my-dinner', JSON.stringify(dinner))

当读取序列化的对象时，我们需要再次将其解析为JSON。

				?

									let dinner = JSON.parse(localStorage.getItem(‘my-dinner'))

其次，尝试存储一个布尔值。同样，localStorage API只支持字符串。存储布尔值时要小心。

幸运的是，该解决方案类似于存储一个JSON对象。当存储一个布尔值时，setItem函数将把它转换为像这样的字符串- " true "。要读取带有字符串的布尔值，我们可以使用JSON.parse方法将其转换回布尔值。

				?

									let myBool = JSON.parse(localStorage.getItem(‘my-bool'))

localStorage的限制

这里是对localStorage限制的快速回顾。

基于字符串的存储
大多数浏览器的存储空间有限，最多可达5 MB
尝试存储巨大字符串时会阻塞主线程。确保不要同时更新相同的键，因为这将导致问题。在这种情况下，最好寻找替代存储解决方案，因为localStorage API不是为这个目的而设计的。
Web worker或web service无法访问localStorage
没有内置的安全机制。因此，我们不建议存储密码或与身份验证相关的数据。任何可以访问用户浏览器的人都可以打开一个页面并读取存储在localStorage中的信息，就像图书馆中公共可用的计算机一样。

到此这篇关于如何在JavaScript中使用localStorage的文章就介绍到这了,更多相关如何在JavaScript中使用localStorage内容请搜索米米素材网以前的文章或继续浏览下面的相关文章希望大家以后多多支持米米素材网！

原文链接：https://juejin.cn/post/6924836293272829959