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是一样的。//将数据保存到sessionStoragesessionStorage.setItem("key","value");//从sessionStorage中获取数据constdata=sessionStorage.getItem("key");//从sessionStorage中删除保存的数据sessionStorage.removeItem("key");//从sessionStorage中删除所有保存的数据sessionStorage.clear();//从sessionStorage中获取所有数据constallData=sessionStorage.valueOf();相同点和不同点LocalStorage和sessionStorage都是用来存储客户端临时信息的对象。以chrome为例，它们只能存储string类型的对象，存储大小为5M。它们都遵循同源策略。不同的是sessionStorage是有时间限制的，会在窗口或浏览器关闭时销毁。localStorage是不确定的，关闭浏览器后仍然存在，除非用户在浏览器UI层手动删除localStorage。LocalStorage可以在同一源的不同窗口共享，但不能在不同浏览器中共享。sessionStorage不能在同一源的不同窗口中共享。注意，这里的不同窗口指的是打开浏览器的新窗口，并不是指页面路由跳转。总结在我做过的项目中，存储一般用于存储少量的用户信息和token。在localStorage和sessionStorage中，毕竟前端的安全性太低了。只要打开控制台，就可以任意修改localStorage和sessionStorage的数据。重要信息最好留在后台。谢谢。最后，如果有疑惑，可以找个小说网站在控制台上试试，很快就能掌握。本文如有错误，敬请指出。
