localStorage sessionStorage

defcon 发布于2019-08-23 12:09 / 3833人阅读

摘要：和当页面会话结束的时候，数据将会被清除。大文档即内容安全政策，要求强制浏览器启用，白名单制度，要求浏览器那些可以访问，那些不能访问。回顾，注册事件使用的是方法事件有此为四个事件事件事件为设置或者移除项的名字或者键名。

localStorage 和 sessionStorage

Window.localStorage 当页面会话结束的时候，数据将会被清除。

之前一刷新页面，直接被清除，后来发现是浏览器插件引入的js脚本，导致出现问题，在思考，如何验证网页是否被插入js脚本，即，类似于掘金社区的，每次访问都会提示，被插入脚本。此有一个专业术语，叫SRI

SRI

原理，使用哈希值验证前端资源的完整性。
大文档 https://developer.mozilla.org...

CSP

即内容安全政策，要求强制浏览器启用，白名单制度，要求浏览器那些可以访问，那些不能访问。

localStorage

此没有过期时间，只有当第三方，或者用户手动清理的时候，才会清空，其余都会一直在浏览器里保存。
演示

var number = Number(localStorage.number);
if (number) {
    ++number;
}else {
    number = 1;
}
localStorage.number = number;
document.write(number);

js文件如上，每次刷新页面重新加载的时候，都会从浏览器中读取localStorage.number的内容。然后进行自增。
场景用于计数操作

seessionStorage

此为一个会话的储存，储存在会话当中，关闭浏览器标签以后，将会被清除，

这两个都受到同源的影响，但是sessionStorage最大的不同在于同一个网站，渲染同一个页面，即使是两个标签，其sessionStorage不可共享，但是iframe可以共享，localStorage受到同源的影响，可以共享。

存储api

一些浏览器厂商定义的api
其中有两个方法，为setItem()以及getItem()这两个方法可以设置值，可以获取值。
一个demo

localStorage.setItem("x", 1);    // 设置值
localStorage.getItem("x");    // 读取值

// 枚举所有的名值对
for(var i = 0; i < localStorage.length; i++) {
    var name = localStorage.key(i);    // 获取第i对名字
    var value = localStorage.getItem(name);    // 获取该对的值
    console.log(name + "," + value);    // 输出值
};

localStorage.removeItem("x");    // 删除x项
localStorage.clear();    // 全部删除

ps： getItem获取的仅仅是储存的副本

储存事件

如果储存在localStorage 以及 sessionStorage的数据发生更改，浏览器会在所有数据可见的页面，触发事件

在对数据进行改变的窗口对象上不会触发该事件

eg；如果两个页面，其中一个页面储存了localStorge，那么另外一个页面也会触发储存的事件。

回顾，注册事件使用的是addEventListener()方法

事件有key newValue storageArea url
此为四个事件

事件

key事件为设置或者移除项的名字或者键名。
newValue 保存新项目的值
oldValue 改变或者删除之前的值
url 触发编号的url
stroageArea 为windows对象上的sessionStroage的值

事件是采用广播机制的。
ps 如果一个用户要求网站停止动画，而这个配置是储存在localStroage中的，那么同源的将会全部停止动画
ps 一个文本编辑，如果用户选择一个工具的时候，可以通过其值，完成通知另外窗口的选择了该工具，用于窗口间的值的传递

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

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

转载请注明本文地址：https://www.ucloud.cn/yun/98013.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