sessionStorage和localStorage

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的数据。重要的信息最好仍是放在后台。

谢谢

最后 若是你们有疑惑能够随便找一个小说网站在控制台试一试，很快即可掌握。
本文若有错误，欢迎指出。