如果你是一名开发人员，想要进入到.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中的信息，就像图书馆中公共可用的计算机一样。

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

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