js客户端存储之Web存储
WEB存储
客户端存储有几种方式,WEB存储就是其中一种。最初作为H5的一部分被定义成API形式,后来被剥离出来作为独立的标准。所描述的API包含localStorage对象和sessionStorage对象,这两个对象实际都代表同一个Storage对象,是持久化关联数组。是名值对的映射表。
localStorage和sessionStorage区别在于存储的有效期和作用域的不同:数据可以存储多长时间以及谁拥有数据的访问权。
浏览器兼容性
存储有效期
localStorage
永久性。除非WEB应用刻意删除存储的数据,或者用户通过设置浏览器配置来删除,否则数据会一直保留在用户电脑上,永不过期。实际上,localStorage的数据是写入磁盘中,每次读取数据时,实际上是从硬盘驱动器上读取这些字节。sessionStorage
窗口或标签页被永久关闭,则通过sessionStorage存储的数据也被删除。
作用域
都是限定在文档源级别。(非同源文档间无法共享)
localStorage
同源的文档间共享相同的localStorage数据。它们之间可以互相读取甚至覆盖对方数据。非同源的文档间互相都不能读取或覆盖对方的数据(即使运行的脚本是来自同一台第三方服务器也不行)。
受浏览器供应商限制。不能访问上次存储在不同浏览器的数据。
sessionStorage
限定在窗口中。如果同源的文档渲染在不同的浏览器标签页中,那么它们的数据也无法共享。【窗口指的是顶级窗口。若一个标签页中有两个<iframe>包含同源文档也可共享】
一个标签页中的脚本是无法读取或覆盖由另一个标签页脚本写入的数据。
【补充:文档流是通过协议、主机名以及端口来决定的。】
存储API
localStorage与sessionStorage均适用。
localStorage.setItem("x",1);//以"x"的名字存储一个数值
localStorage.x = 1;//直接向 Web 存储对象添加键/值对localStorage.getItem("x");//获取数值
localStorage.x;//直接从 Web 存储对象中检索键/值对localStorage.removeItem("x");//删除“x”项。
//removeItem是唯一通用的能删除单个名值对的方式。(因为IE8不支持delete操作符)
localStorage.clear();//全部删除。唯一能删除存储对象中所有名值对的方式//将一个数组存储为字符串
var myArray = new Array('First Name', 'Last Name', 'Email Address');
localStorage.formData = JSON.stringify(myArray);//检索数组的字符串版本并将它转换成一个可用的 JavaScript 数组
var myArray = JSON.parse(localStorage.formData);
存储事件
无论什么时候存储在localStorage或sessionStorage的数据发送改变,浏览器都会在其它对该数据可见的窗口对象上触发存储事件。
【对于localStorage,如果浏览器两个标签页都打开了来自同源的页面,其中一个页面存储了数据,另外一个标签页就会接收到一个存储事件。】
【对于sessionStorage,只有当相互牵连的窗口的时候才会触发存储事件】
【只有当存储数据真正发生改变的时候才会触发存储事件】
与存储事件相关的事件对象属性
key 被设置或移除的项的名字或者键名。如果调用clear(),则该属性值为null
newValue 保存该项的新值。若调用removeItem(),该属性值为null
oldValue 改变或删除该项前,保存该项原先的值。插入一个新项时,该属性值为null
storageArea 好比是目标Window对象上的localStorage属性或sessionStorage属性
url 触发该存储变化脚本所在文档的URL
【localStorage和存储事件都是采用广播机制,浏览器会对目前正在访问同样站点的所有窗口发送消息。】
安全性
【翻译的比较烂。可以去看官方解释】
DNS spoofing attacks
针对DNS欺骗攻击,页面可以使用TLS,来确保他们是来自同一个域从而允许访问。Cross-directory attacks
共享一个主机名的不同用户,都共享同一个local storage object。在共享主机时需要谨慎使用。因为其他共享用户可以读取并且覆盖数据。【PS:Even if a path-restriction feature was made available, the usual DOM scripting security model would make it trivial to bypass this protection and access the data from any path.】Implementation risks
主要风险在于恶意网站可以从其他域读取信息并且对其他域写入恶意数据。让第三方站点读取其他域的数据会造成信息泄露(information leakage)。让第三方站点写其他域存储的数据也会造成信息欺骗(information spoofing)
【Web 存储并不比 cookies 安全。所以不要在客户端存储敏感信息,比如密码或信用卡信息。】
localStorage优化
由于localStorage的数据是被写入磁盘中,每次读取数据是从硬盘驱动器中读取,速度会很慢。除此之外,从单一localStorage键值中读取的数据量对速度是没有影响, 而读取次数越多,速度越慢。
最佳策略:使用尽可能少的键值,存取尽可能多的数据。
参考内容:《js权威指南》
使用 HTML5 Web 存储实现离线工作
《Web性能实践日志》
js客户端存储之Web存储相关推荐
- HTML5 中Web存储问题
HTML5 Web 存储 HTML5 web 存储,一个比cookie更好的本地存储方式.注意: Internet Explorer 7 及更早IE版本不支持web 存储. 什么是 HTML5 Web ...
- web存储详解(cookie、sessionStorage、localStorage、indexedDB)
目录 一.web存储概念简介 1. 什么是web存储? 2. 为什么需要web存储? 二.web存储详解 1. cookie 2. sessionStorage和localStorage (1). 相 ...
- HTML5 - Web存储使用详解(本地存储、会话存储)
1,Web存储介绍 HTML5的Web存储功能是让网页在用户计算机上保存一些信息.Web存储又分为两种: (1)本地存储,对应 localStorage 对象.用于长期保存网站的数据,并且站内任何页 ...
- 四种有能力取代Cookies的客户端Web存储方案
目前在用户的网络浏览器中保存大量数据需要遵循几大现有标准,每一种标准都拥有自己的优势.短板.独特的W3C标准化状态以及浏览器支持级别.但无论如何,这些标准的实际表现都优于广泛存在的cookies机制. ...
- Web客户端的几种存储方式
常见的浏览器端存储技术有: cookie sessionStorage localStorage userData indexDB 服务器端存储技术: session 一. ...
- HTML5本地存储之Web Storage篇
2019独角兽企业重金招聘Python工程师标准>>> Web Storage是HTML5引入的一个非常重要的功能,在前端开发中经常用到,可以在客户端本地存储数据,类似HTML4的c ...
- localstorage存储大小_Cookie 已凉,Web 存储该这么做!
本文经授权转自公众号CSDN(ID:CSDNnews)作者 | 浪里行舟责编 | 郭芮 随着移动网络的发展与演化,我们手机上现在除了有原生 App,还能跑"WebApp"--它即开 ...
- 【HTML5】Web存储、通信、地理位置
Web存储 cookie 存储在浏览器中,每次浏览器向服务器发送请求都需要携带cookie.一般情况下,cookie是产生于服务器端,保存于客户端,但是我们也可以通过js来产生cookie.(cook ...
- cookie可存的最大限制_一文梳理Web存储,从cookie,WebStorage到IndexedDB
前言 HTTP是无状态的协议,网络早期最大的问题之一是如何管理状态.服务器无法知道两个请求是否来自同一个浏览器.cookie应运而生,开始出现在各大网站,然而随着前端应用复杂度的提高,Cookie 也 ...
最新文章
- 广东计算机好的2a学校,广东专插本2A院校排名情况
- python 字节和字符串区别,Python中字节串和字符串,不是一个概念没有区别之分...
- SOCK_DGRAM(数据报套接字)与SOCK_STREAM(流套接口)的区别
- 操作系统之进程管理:11、用信号量机制实现进程同步、互斥、前驱关系
- 数列分块入门 1(LibreOj-6277)
- Python3 递归算法
- 重构Webpack系列之四 ---- Loaders
- 发现这里才是我的地方
- ubuntu 卸载anaconda
- 企业网站专业性诊断评价
- thinkphp使用easywechat接入微信公众号
- 腾讯云API弹性公网IP踩坑
- cnpm安装淘宝镜像
- 幼儿体能五项技能测试软件,卓艺湖畔幼儿园教师五项体能培训--器械游戏分享...
- dns服务器经赏要修复,十要诀帮你修复DNS域名解析服务故障
- linux 命令 修改密码,一条命令修改Linux密码
- 我用Python逆向登录世界上最大的游戏平台,steam加密手段有多高明【内附源码】
- 程序员的表白浪漫HTML生日礼物
- 创新与服务紧贴“本土化”,Galaxy S9|S9+不愧为三星诚意之作
- C语言入门经典第1课
热门文章
- linux cmake编译安装mysql_Linux源码安装MySQL 5.6.12 (Cmake编译)
- java创建临时文件夹_java创建临时文件
- eclipse html页面校验,当我在Eclipse浏览器中运行url时,HTML表单未通过验证
- app inventor HTML5,[App Inventor] Web客戶端元件 POST 傳值的使用方式
- qt调用mysql调用了存储过_Qt调用Server SQL中的存储过程
- android手势监听功能吗,Android手势监听 OnGestureListener (短按,长按,慢滑动,快滑动)...
- php自动合并,php实现合并数组并去除重复的方法
- python如何运行一个python程序_在python中,如何运行一个命令行程序,它在发送Ctrl+D之前不会返回...
- ?php php,PHP: Balises PHP - Manual
- docker gpu报错Error response from daemon: could not select device driver ““ with capabilities: [[gpu]]