持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情
什么是网络存储？
Web存储是一项HTML5功能，允许你在浏览器中以键值对存储数据。这使应用程序能够在客户端存储数据，以便你可以稍后访问或操作它。存储在Web存储中的所有数据都保留在浏览器中，不会传输到其他地方。
网络存储的类型
Web存储的两种主要类型是本地存储和会话存储。每个都有自己独特的特点。
但他们有一个共同点，那就是他们将数据存储在用户用于访问网页的特定浏览器中。你无法通过其他浏览器访问相同的数据。
现在让我们详细讨论一下这两个问题。
本地存储
在应用程序的生命周期内，本地存储可以为每个应用程序存储5MB的数据。关闭浏览器不会以任何方式影响数据——除非你删除它，否则它会保留在那里。
你只能通过localStorage访问本地存储对象。可用于对localStorage对象执行操作的方法是：
localStorage // to access the localStorage object
localStorage.setItem('name', 'John') // sets name equal to john localStorage.getItem('name') // "John"
localStorage.removeItem('name') // removes name from the localStorage localStorage.clear() // clears the localStorage
localStorage.setItem()将键和值作为参数，并在本地存储对象中设置一个等于给定键值对的新项。
localStorage.getItem()将密钥作为参数，并返回存储到存储中该密钥的值。
localStorage.clear()清除整个localStorage对象。
localStorage.removeItem()将键作为参数，并删除相应的键值对。
你存储在localStorage中的任何项目都将存储为字符串。这意味着你需要将数组或对象等其他数据类型转换为字符串——否则你将失去它们的结构。
请参阅下面的示例：
const scores = [10, 8, 6, 3, 9]
const scoresJSON = JSON.stringify(scores)
localStorage.setItem('scores', scoresJSON)
localStorage // output >> {scores: '[10, 8, 6, 3, 9]', length: 1}
在上面的示例中，我们首先创建了一个数组分数，然后使用JSON.stringify()将其转换为字符串，最后将字符串化分数数组保存在localStorage中。
花点时间看看我在浏览器控制台上运行相同代码片段时得到的输出。
浏览器控制台中的示例代码
请注意，关键分数的值等于我们的字符串分数数组。但是，如果我们不将分数数组转换为字符串，我们的数组将失去其结构，并且项目将保存为以下字符串：
const scores = [10, 8, 6, 3, 9]
localStorage.setItem('scores', scores)
localStorage // output >> {scores: '10, 8, 6, 3, 9', length: 1}
我们还在浏览器控制台中运行代码，看看什么是控制台的日志：
保存数组，而无需将其转换为字符串
了解当我们不使用JSON.stringify()将其转换为字符串时，我们的分数数组是如何转换为字符串的？
会话存储
会话存储允许你根据系统内存和存储在浏览器中的数据将数据存储在浏览器中，直到浏览器关闭。换句话说，关闭浏览器将清除存储在会话存储中的所有数据。
与localStorage一样，你可以通过在浏览器控制台中键入sessionStorage来访问会话存储。
sessionStorage // access the session storage
sessionStorage.setItem('name', 'John') // add name to session storage with value john
sessionStorage.getItem('name') // get the name item from session storage sessionStorage.removeItem('name') // remove name item from the session storage sessionStorage.clear() // clear the session storage
sessionStorage.setItem()将键和值作为参数，并在本地存储对象中设置一个等于给定键值对的新项。
sessionStorage.getItem()以键为参数，并返回存储到存储中该密钥的值。
sessionStorage.removeItem()输入键作为参数，并删除相应的键值对。
sessionStorage.clear()清除整个localStorage对象。
与localStorage一样，存储在sessionStorage中的任何项目都将存储为字符串。这意味着在存储会话存储之前，我们需要将它们转换为字符串。
Web存储示例用例
当你希望用户重新访问网页时提供数据时，你可以使用本地存储，例如购物车或游戏/quiz分数。请记住，保存在本地存储中的信息不应该是敏感的。
当需要保存的数据敏感时，你可以使用会话存储。用户身份验证是你希望在用户关闭选项卡后立即清除的数据示例。
结论
在本文中，了解了在浏览器中存储临时数据的方法。我希望这有助于你了解如何在以及何时在你的项目中使用这两种类型的Web存储。
