关于html5:如何在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 中的信息，就像图书馆中公共可用的计算机一样。

就是这样！心愿这篇文章对你有所帮忙！

欢送关注我的公众号——码农译站，如果你有喜爱的外文技术文章，能够通过公众号留言举荐给我。