什么是 localStorage？
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
我在参加编程训练营的时候，曾在某个项目中用到过 localStorage。当时我们学习用它来持久化 JWT 身份验证数据，我只知道它的存在，除此之外一无所知。
我之前完全不知道localStorage的使用范围比token还要广！
我们一起来快速了解一下localStorage到底是什么吧？
方法：
| 方法 | 功能 |
|---|---|
setItem(key, value)。 |
设置要存储的键值对。 |
removeItem(name) |
删除由 name 标识的名称-值对。 |
getItem(name) |
获取给定名称的值。 |
key(index) |
获取给定数值位置上的值的名称。 |
clear() |
删除所有值。 |
length |
获取键值对的数量 |
localStorage 只能存储字符串类型的值。它会在存储之前自动将非字符串数据转换为字符串。
例如：
从 Storage 对象中检索数据时，数据始终以字符串形式返回。sessionStorage和Cookies也是如此。您也可以将对象存储在localStorage中。我们只需要使用 localStorage来存储对象即可。JSON.stringify()
例如： 正如你所看到的，一旦存储，整个对象就会变成字符串，即使尝试取回数据也是如此。但是，可以使用以下方法将此数据转换回对象。
JSON.parse()
就像这样；
容量和使用情况
有人说大多数现代网络浏览器允许存储最多 5MB 的数据，而另一些人则说存储空间接近无限。
在数据存储方面，localStorage 会一直保留数据，直到浏览器关闭或您运行命令为止localStorage.clear()。
在我之前的项目中，我使用了localStorage.clear()用户从 Web 应用程序注销时清除浏览器中存储的所有令牌的方法。
您可以在我们的 handleLogout 函数中查看相关代码；
我也在我的一个 React 应用项目中使用过 localStorage 来管理页面主题！由于存储应用主题不需要任何安全要求，所以我尝试将值存储在其中。
切换主题的组件的一部分会onClick eventListener触发一个 switchTheme 函数，该函数包含一个 if 语句，它看起来像这样；
可以看出，localStorage 的主要用途就是存储键值对，这些键值对可以用于许多其他用途。
好了，就这些！希望您浏览这篇关于 localStorage 的博客时感到愉快，也希望它能对您持久化 cookie 或状态以外的数据有所帮助。
你还有其他使用 localStorage 的经验吗？欢迎在下方评论区留言！我很想尝试一下！
参考：
文章来源：https://dev.to/tolentinoel/what-is-localstorage-3ffh