LocalStorage、SessionStorage

Sleepy 发布于2019-08-23 12:22 / 440人阅读

摘要：和接口用于脚本在浏览器保存数据。存对象的时候会变成，因为解决方法用来存。而的变量不存在页面里，系统存在客户端本地的盘的一个文件里。除了保存期限的长短不同，这两个对象的其他方面都一致。总结在用户关闭页面会话结束后就失效。

window.sessionStorage和window.localStorage接口用于脚本在浏览器保存数据。

LocalStorage 基本使用 设置

window.sessionStorage.setItem("key", "value");
window.localStorage.setItem("key", "value");

获取

window.sessionStorage.getItem("key")
window.localStorage.getItem("key")

清除

localStorage.removeItem("key");
window.localStorage.clear()

完整用法

注意点

localStorage是html5技术提供的API，html5中新增加的标签,技术(包括promise,localStorage等),统称为html5

session是服务器上存的hash，但localStorage实质也是一个hash，只不过是浏览器上的hash

localStorage只能存String类型的字符串

存函数会转化成字符串。存对象的时候会变成"[object Object]"，因为({1:"xxx"}).toString()//"[object Object]"

解决方法：用json来存。例如：localStorage.setItem("jsonString", JSON.stringify({name: "mtt"}))

使用注意 localStorage里的数据和js变量有什么区别？

当一个js变量被从新赋值，变量的值当即被改变，但当页面刷新时，变量又回到最初的状态。
而localStorage的变量不存在页面里，windows系统存在客户端本地的C盘的一个文件里。

简单的使用实例

想要只提示用户一次，当下次用户进入这个网站上的时候，不跳出提示框。

总结

LocalStorage 跟 HTTP 无关(而cookie是http的一个头)

发送HTTP请求时不会带上 LocalStorage 的值

只有相同域名的页面才能互相读取 LocalStorage（没有同源那么严格）

每个域名 localStorage 最大存储量为 5Mb 左右（每个浏览器不一样）

常用场景：记录有没有提示过用户（没有用的信息，不能记录密码）

LocalStorage 永久有效，除非用户主动清理缓存

SessionStorage

sessionStorage保存的数据用于浏览器的一次会话（session），当会话结束（通常是窗口关闭），数据被清空；localStorage保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。除了保存期限的长短不同，这两个对象的其他方面都一致。

总结：SessionStorage 在用户关闭页面（会话结束）后就失效。其余的和localstorage一样

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

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

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

sessionStorage和localStorage

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

wujl596 2019-08-23 14:38 评论0 收藏0
印象最深的一个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