我们在编写业务代码时很经常会产生在浏览器中存储数据的业务需求。例如一些页面的登录信息，用户是否是会员的一些信息。在HTML5中新增的特性中localStorage、sessionStorage就能很好的帮我们完成这些需求。但是很多同学都不是很了解这两个特性。今晚我们就来好好了解一下他们
老规矩先从定义下手
localStorage是什么？
localStorage翻译过来的意思是(本地存储)。localStorage是HTML5发布后，提供了一种新的客户端本地保存数据的方法，localStorage属性允许在浏览器中存储 key/value 对的数据。
localStorage的特点
- 数据在同一来源的所有选项卡和窗口之间共享。
- 数据不会过期。即使在浏览器重新启动后，它仍然会保留，并且在操作系统重新启动后也不会丢失。
- 可以
JSON用来存储对象 - 存储容量4.98MB（不同浏览器情况不同，safari 2.49M）
- 保存在客户端，不与服务端交互。节省网络流量
注意：
- 只有窗口在访问的网站在同一来源（域/端口/协议）上，数据才可以共享，URL路径可以不同
- 仅使用字符串。我们存储的key 和 value的值 应该都是字符串。如果我们指定其他任何类型，例如数字或对象，它将自动转换为string。
- localStorage 写入的时候，如果超出容量会报错，但之前保存的数据不会丢失。
- localStorage 存储容量快要满的时候，getItem 方法性能会急剧下降。
localStorage的操作方法(属性和方法)
localStorage.setItem("name", "value");–将项目存储为键/值对。
localStorage.getItem("name"); // => 'value' –通过键获取项目的值。
localStorage.removeItem("name"); –使用键删除项目。
localStorage.clear(); // 删除所有数据
sessionStorage是什么？
sessionStorage翻译过来的意思是(会话存储)。sessionStorage是HTML5发布后，提供了一种新的客户端本地保存数据的方法，sessionStorage属性允许在浏览器中存储 key/value 对的数据。存储的数据在页面会话结束时会被清除。
localStorage的特点
sessionStorage仅存在于当前浏览器标签中。具有相同页面的另一个选项卡将具有不同的会话存储。- 不过，它是在同一标签中的内联框架之间共享的（在同一来源的情况下）。
- 数据在页面刷新后仍然有效，但不能关闭/打开选项卡。
- 存储容量4.98MB（部分浏览器没有限制）
- 保存在客户端，不与服务端交互。节省网络流量
localStorage的操作方法(属性和方法)
sessionStorage.setItem("name", "value"); –将项目存储为键/值对。
sessionStorage.setItem("name"); // => 'value' –通过键获取项目的值。
sessionStorage.setItem("name"); –使用键删除项目。
sessionStorage.clear();// 删除所有数据
sessionStorage、localStorage 的区别总结
-
生命周期：数据的生命周期不同。
sessionStorage中存储的数据只在当前会话（窗口或标签页）关闭之前有效，而localStorage中存储的数据则长期有效，除非被显式删除。 -
共享性：两者对于同一域名下的页面可以共享访问。但是，在不同标签页或窗口之间，每个标签页/窗口都有自己独立的
sessionStorage存储空间。 -
容量限制：通常情况下，
localStorage的容量要比sessionStorage大得多。根据规范要求，大部分浏览器最小支持 5MB 的localStorage -
作用域：两者在 JavaScript 访问上也稍微有所不同。通过全局对象
window.sessionStorage.xxxx, 可以访问到一个特定页面（即使是跨 iframe），而使用全局对象window.localStorage.xxxx, 则可以从任何地方都能够访问到。
总结起来就是：
- 如果你想将数据仅保存在用户正在使用的单个会话中，并且希望该会话结束后清除这些数据，则使用
sessionStorage - 如果你想持久保存数据，并且希望在不同的会话间共享这些数据，则使用
localStorage
但需要我们注意的是，存储在本地的数据对于安全性而言都是相对较低的，我们需要避免将敏感信息存储在其中。
写在最后
伙伴们，如果你觉得我写的文章对你有帮助就给zayyo点一个赞👍或者关注➕都是对我最大的支持。当然你也可以加我微信：IsZhangjianhao，邀你进我的前端学习交流群，一起学习前端，成为更优秀的工程师～
开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 17 天，点击查看活动详情
