sessionStorage和localStorage

wujl596 发布于2019-08-23 14:38 / 2353人阅读

摘要：前端存储和简述曾在项目中多次使用过和来存放，但一直未深入了解。以为例他们均只能存储字符串类型的对象存储大小都为都遵守同源策略不同点有期限，当窗口或浏览器关闭时就会被销毁。本文如有错误，欢迎指出。

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

谢谢

最后如果大家有疑惑可以随便找一个小说网站在控制台试一试，很快便可掌握。
本文如有错误，欢迎指出。

GPU云服务器云服务器 Sessionstorage localstorage localstorage存储存储localstorage

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100915.html

印象最深的一个bug：sessionStorage缓存在移动端失效

摘要：移动端缓存失效是我印象最深的一个之一，为啥呢，因为这个问题导致我加班到很晚。的生命周期是仅在当前会话下有效。引入了一个浏览器窗口的概念，是在同源的窗口中始终存在的数据。无bug，不程序：作为程序员的我，不是修bug就是在写bug的路上。　　移动端sessionStorage缓存失效是我印象最深的一个bug之一，为啥呢，因为这个问题导致我加班到很晚。在现在看来就是一个简单的概念问题。在我刚工作...

yuxue 2021-11-18 10:07 评论0 收藏0
sessionStorge和localStorage的使用-踩坑记_09

摘要：的使用属性允许你访问一个对象。它与相似，不同之处在于里面存储的数据没有过期时间设置，而存储在里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。 sessionStorge的使用 sessionStorage 属性允许你访问一个 session Storage 对象。它与 localStorage 相似，不同之处在于 lo...

Jochen 2019-08-23 13:41 评论0 收藏0
sessionStorge和localStorage的使用-踩坑记_09

摘要：的使用属性允许你访问一个对象。它与相似，不同之处在于里面存储的数据没有过期时间设置，而存储在里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。 sessionStorge的使用 sessionStorage 属性允许你访问一个 session Storage 对象。它与 localStorage 相似，不同之处在于 lo...

PrototypeZ 2019-08-02 12:06 评论0 收藏0
客户端数据存储 --- web storage From 《高程3》

摘要：的目的就是取代进行大量的本地数据存储，其中不能进行跨会话存储，这可以使用弥补。删除由指定的名值对儿。使用方法存储数据使用属性存储数据使用方法读取数据使用属性读取数据一般来说，对存储空间大小的限制都是以每个源协议域和端口为单位的。前言本文首先介绍web storage和Cookie的对比，解释web storage的优势；随后指出怎样使用插firebug插件的扩展firestorag...

wangbinke 2019-08-21 14:37 评论0 收藏0