H5 前端存储 localStorage 和 sessionStorage
简述
曾在项目中多次使用过 localStorage 和 sessionStorage 来存放 token，但一直未深入了解。近期项目压力极小，就看了很多文章研究了一下，并结合项目经验做个总结。
session 和 sessionStorage，Java 和 JavaScript
在彻底弄懂 session,cookie,token 中，我已经讲过 session。在我学习 sessionStorage 的过程中，看到很多文章的评论说：sessionStorage 不是存在服务器的吗？在这里，我说明一下，session 是存放于服务器的一个状态集合，而 sessionStorage 是 H5 新引入的一个客户端存储数据的空间，与 session 并无关系，大家千万不要搞混了。就像 Java 和 JavaScript，只是名字长得像而已。localStorage 和 sessionStorage 之间有些异同，可以进行比较
用法
用法很简单，sessionStorage 和 localStorage 的 api 一样。
// 保存数据到 sessionStorage
sessionStorage.setItem(“key”, “value”);
// 从 sessionStorage 获取数据
const data = sessionStorage.getItem(“key”);
// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem(“key”);
// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();
// 从 sessionStorage 获取全部数据
const allData=sessionStorage.valueOf();
异同
相同点
localStorage 和 sessionStorage 一样都是用来存储客户端临时信息的对象。以 chrome 为例
他们均只能存储字符串类型的对象
存储大小都为 5M
都遵守同源策略
不同点
sessionStorage 有期限，当窗口或浏览器关闭时就会被销毁。localStorage 无限期，关闭浏览器后仍存在，除非用户手动在浏览器 UI 层删除
localStorage 在同源同域同端口的不同窗口下可共享，在不同浏览器中不可共享
sessionStorage 在同源同域同端口的不同窗口下不可共享。注意这里的不同窗口是指浏览器另起一窗口，并不是指页面路由跳转
小结
在我做过的项目中，storage 一般用来存储少量的用户信息和 token，建议大家不要把什么数据都放在 localStorage 和 sessionStorage 中，毕竟前端的安全性太低。只要打开控制台就可以任意的修改 localStorage 和 sessionStorage 的数据。重要的信息最好还是放在后台。
谢谢
最后 如果大家有疑惑可以随便找一个小说网站在控制台试一试，很快便可掌握。本文如有错误，欢迎指出。