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 一个文本编辑,如果用户选择一个工具的时候,可以通过其值,完成通知另外窗口的选择了该工具,用于窗口间的值的传递
localStorage sessionStorage相关推荐
- 客户端 localStorage, sessionStorage, cookie 的区别
SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据,而且都是字符串类型的键值对! 区别在于前两者属于WebStorage,创建它们的目的便是存 ...
- localStorage sessionStorage 和cookie等前端存储方式总结
localStorage sessionStorage 和cookie localStorage localStorage是本地存储的,除非清空本地数据 localStorage不会自动把数据发给服务 ...
- 本地存储-cookie|localStorage|sessionStorage|indexedDB
本地存储 本地存储 cookie 如何工作 问题 cookie标准限制 属性 expires|max-age domain&path secure HttpOnly 设置cookie 服务端设 ...
- 本地储存 localstorage sessionstorage 的兼容性,API,特点
在开发中发现cookie储存会在http请求头中,大大影响了数据请求交互. 现在h5中提供了新的解决方式(API) 存储方式: 1.本地储存 localstorage & sessionsto ...
- cookie localStorage sessionStorage _(¦3」∠)_ 看完你居然就懂了!!!
知识点 cookie sessionStorage localStorage cookie 本身用于浏览器和server通讯 被 "借用" 到本地存储 可用 document.co ...
- 浏览器缓存 HTTP缓存-CDN缓存-localstorage/sessionstorage/cookie
文章目录 浏览器缓存 面试题 概述 HTTP缓存 -提高二次请求响应速度 HTTP的缓存控制,如何设置缓存策略 CDN缓存 -提高首次请求资源的响应速度 CDN的核心功能 CDN的基本原理 local ...
- [JavaScript] Cookie,localStorage,sessionStorage概述
Cookie Cookie 是一些数据, 存储于你电脑上的文本文件中,当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息.Cookie 的作用就是存储 web 页面 ...
- 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题
2019独角兽企业重金招聘Python工程师标准>>> 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStorage存储一些数据,相比最多能 ...
- 详说 Cookie, LocalStorage 与 SessionStorage
本文最初发布于我的个人博客:咀嚼之味 最近在找暑期实习,其中百度.网易游戏.阿里的面试都问到一些关于HTML5的东西,问题大多是这样开头的:"你用过什么HTML5的技术呀?" 而后 ...
最新文章
- 现代hy-9600音响_从音响工程师到软件工程师-为什么我要学习编码
- jsp实现简单的分页
- 对神经网络分类行为的认识二则
- IT人士运动方式选择建议
- RPAD()和LPAD()函数进行字符串的填充
- java 反射(Reflection) 详解
- 在 WinCe 平台读写 ini 文件
- linux基础 linhaifeng,Linux 基础命令(一)
- mybatis中<mappers> ,mapperLocations,和MapperScannerConfigurer 用法
- 让你的创业失败的18个昏招 都归结到这里
- php 发送图片,利用PHP输入流发送图片
- windows利用DOS窗口编译C++文件
- oracle 11g PL/SQL Programming学习三
- WPS文字常用排版快捷键
- Linux与BSD中TCP协议栈实现比较
- ps常用快捷键 常用的
- git reset HEAD 用法
- DELPHI XE2马上推出
- 关于计算机网络的学习
- springcloud入门——zookeeper
热门文章
- CCF认证训练行动路线图
- [总结]FFMPEG视音频编解码零基础学习方法--转
- 修改完/etc/fstab后重新挂载方法
- Gridview 单选效果实现,且用且珍惜
- 获取指定时间的当天时间范围工具类
- java 析构方法_java析构方法详解
- Android图片的Base64编码与解码
- Spring Aop(九)——基于正则表达式的Pointcut
- jquery代码小片段
- s:property=a value=/取的s:debug/s:debug中的value stack中的属性值