开发者社区> mysoul8021> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

localStorage sessionStorage

简介:
+关注继续查看

localStorage 和 sessionStorage

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

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

SRI

原理,使用哈希值验证前端资源的完整性。
大文档 https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity

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 一个文本编辑,如果用户选择一个工具的时候,可以通过其值,完成通知另外窗口的选择了该工具,用于窗口间的值的传递

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
chrome20-查看localstorage和sessionstorage
chrome20-查看localstorage和sessionstorage
0 0
localStorage灵魂五问。 5M?? 10M !!!
localStorage 存储的键和值始终采用 UTF-16 DOMString 格式,每个字符使用两个字节。与对象一样,整数键将自动转换为字符串。
0 0
晨兴夜寐:这一次,彻底搞懂Cookie,LocalStorage,SessionStorage
晨兴夜寐:这一次,彻底搞懂Cookie,LocalStorage,SessionStorage
0 0
小议 localStorage
前言 什么是 localStorage? 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。
809 0
本地存储之sessionStorage
源码可以到GitHub上下载! sessionStorage:   关闭浏览器再打开将不保存数据     复制标签页会连同sessionStorage数据一同复制   复制链接地址打开网页不会复制seessionStorage内的数据     清除缓存加载当前页对页面无影响     1) 同源策略限制。
697 0
本地存储之localStorage
源码可以到GitHub上下载! localStorage:   存储上限限制:不同的浏览器存储的上限也不一样,但大多数浏览器把上限限制在5MB以下。   localStorage与sessionStorage的区别:就是localStorage属于永久性存储,而sessio...
817 0
第139天:详解cookie、 sessionStorage 和localStorage
1.cookie:存储在用户本地终端上的数据。有时也用cookies,指某些网站为了辨别用户身份,进行session跟踪而存储在本地终端上的数据,通常经过加密。一般应用最典型的案列就是判断注册用户是否已经登过该网站。
1502 0
localStorage 还能这么用
HTML5中 Web Storage 的出现,主要是为了弥补使用 Cookie 作为本地存储的不足。Cookie 存储的数据量非常小,而且数据会自动携带到请求头里,但服务器端可能并不关心这些数据,所以会造成带宽的浪费。
1036 0
localstorage 本地存储
define(function() { var win = window, doc = document, decode = function(s) { // 参考jquery cookie的实现: https://github.com/carhartl/jquery-cookie/blob/master
1080 0
localStorage和sessionStorage区别
localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。 他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现)。
610 0
+关注
mysoul8021
佛系中
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载