Web Storage
概述
Web Storage的目的是克服由cookie带来的一些限制,当数据需要被严格控制在客户端上时,无须持续地将数据发回服务器。Web Storage的两个主要目标是:提供一种在cookie之外存储会话数据的途径以及提供一种存储大量可以跨会话存在的数据的机制
Web Storage分成两类:sessionStorage和localStorage。sessionStorage保存的数据用于浏览器的一次会话,当会话结束(通常是该窗口关闭),数据被清空;localStorage保存的数据长期存在,下一次访问该网站的时候,网页可以直接读取以前保存的数据。除了保存期限的长短不同,这两个对象的属性和方法完全一样
它们很像cookie机制的强化版,能够动用大得多的存储空间。目前,每个域名的存储上限视浏览器而定,Chrome是2.5MB,Firefox和Opera是5MB,IE是10MB。其中,Firefox的存储空间由一级域名决定,而其他浏览器没有这个限制。也就是说,在Firefox中,a.example.com和b.example.com共享5MB的存储空间。另外,与Cookie一样,它们也受同域限制。某个网页存入的数据,只有同域下的网页才能读取
通过检查window对象是否包含sessionStorage和localStorage属性,可以确定浏览器是否支持这两个对象
[注意]IE浏览器不支持在本地使用storage
存取数据
sessionStorage和localStorage保存的数据,都以“键对”的形式存在。也就是说,每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存
[注意]Storage类型只能存储字符串。非字符串的数据在存储之前会被转换成字符串
【setItem()】
存入数据使用setItem方法。它接受两个参数,第一个是键名,第二个是保存的数据
[注意]不同的浏览器存入的Storage位置不一样,不能通用
sessionStorage.setItem("key","value"); localStorage.setItem("key","value");
【getItem()】
读取数据使用getItem方法。它只有一个参数,就是键名
var valueSession = sessionStorage.getItem("key"); var valueLocal = localStorage.getItem("key");
除了使用setItem()和getItem()方法之外,还可以使用属性来存取数据
localStorage.setItem("key1","value1"); localStorage.testkey = 'testvalue'; console.log(localStorage.getItem('testkey'));//'testvalue'console.log(localStorage.key1);//'value1'
清除数据
【removeItem()】
removeItem()方法用于清除某个键名对应的数据
[注意]清除不存在的键名不会报错,只会静默失败
sessionStorage.removeItem('key'); localStorage.removeItem('key');
除了使用removeItem()方法,还可以使用delete操作来清除数据
[注意]IE7-浏览器不支持delete操作符来清除storage数据
localStorage.setItem("key1","value1");delete localStorage.key1; console.log(localStorage.key1);//undefinedconsole.log(localStorage.getItem('key1'));//null
【clear()】
clear方法用于清除所有保存的数据
sessionStorage.clear(); localStorage.clear();
遍历操作
【key()】
key(index)方法返回index位置处的值的名字
sessionStorage.setItem("key1","value1"); sessionStorage.setItem("key2","value2"); console.log(sessionStorage.key(0));//'key1'console.log(sessionStorage.key(1));//'key2'console.log(sessionStorage.key(2));//null
【length】
length属性返回名值对儿的个数
console.log(sessionStorage.length);//2
利用length属性和key()方法,可以遍历所有的键
for(var i = 0; i < localStorage.length; i++){ var key = localStorage.key(i); var value = localStorage.getItem(key); }
还可以使用for-in循环来迭代
for(var key in localStorage){ var value = localStorage.getItem(key); }
存储事件
首先,要特别注意的是,该事件只发生在window对象上,在document对象上触发无效,且使用DOM0级、DOM2级事件处理函数都可以
无论对sessionStorage还是localStorage进行操作,都会触发storage事件。当通过属性或setItem()方法保存数据,使用delete操作符或removeItem()删除数据,或者调用clear()方法时,都会发生该事件
[注意]只有当存储数据真正发生改变的时候才会触发存储事件。像给已经存在的存储项设置一个一模一样的值,抑或是删除一个本来就不存在的存储项都是不会触发存储事件的。通过getItem()方法获取数据也不会触发该事件
一般地,storage事件不在导致数据变化的当前页面触发。如果浏览器同时打开一个域名下面的多个页面,当其中的一个页面改变sessionStorage或localStorage的数据时,其他所有页面的storage事件会被触发,而原始页面并不触发storage事件。可以通过这种机制,实现多个窗口之间的通信
[注意]IE8-浏览器不支持storage事件,IE9+浏览器与其他标准浏览器有所不同,无论数据真实值是否变化,只要对数据进行设置或删除,都会触发该事件,且原始页面和同一域名下的其他页面都会触发
这个事件的event对象有以下属性
url:触发事件的链接地址 key:设置或者删除的键名 newvalue:如果是设置值,则是新值;如果是删除键,则是null oldValue:键被更改之前的值 storageArea:返回触发事件的对象
改变输入框中的值,再点击按钮,会触发storage事件按钮
<!-- 其他页面 --><div id="result"></div><script>window.onstorage = function(e){e = e || event;result.innerHTML = 'key: ' + e.key + '<br>oldValue: ' + e.oldValue + '<br>newValue: ' + e.newValue + '<br>url: ' + e.url + '<br>storageArea: ' + e.storageArea; }</script>
原始页面:
转载于:https://blog.51cto.com/12951189/1940845
Web Storage相关推荐
- H5中使用Web Storage来存储结构化数据
在上一篇对Web Storage的介绍中,可以看到,使用Storage保存key-value对时,key.value只能是字符串,这对于简单的数据来说已经够了,但是如果需要保存更复杂的数据,比如保存类 ...
- HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)...
1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是coo ...
- Cookie与Web Storage的区别
共同点:用于数据的存储. 区别: 1.是否需要添加到http请求头? HTTP Cookie(cookie):在客户端存储会话信息,要求服务器对任意HTTP请求发送set-cookie HTTP头作为 ...
- Cookie的利弊以及与web storage的区别
cookie的优点:具有极高的扩展性和可用性 通过良好的编程,控制保存在cookie中的session对象的大小. 通过加密和安全传输技术,减少cookie被破解的可能性. 只有在cookie中存放不 ...
- html5 本地存储Web Storage
在过去本地存储数据基本都是使用cookies保存一些简单的数据,使用cookies存储永久数据存在以下几个问题: 1.cookies的大小被限制在4KB: 2.cookies是随HTTP事务一起发送的 ...
- (五)HTML5本地存储——Web Storage
Web应用的发展,使得客户端存储使用得也越来越多,而实现客户端存储的方式则是多种多样.最简单而且兼容性最佳的方案是Cookie,但是作为真正的客户端存储,Cookie则存在很多致命伤.此外,在IE6及 ...
- HTML5本地存储之Web Storage篇
2019独角兽企业重金招聘Python工程师标准>>> Web Storage是HTML5引入的一个非常重要的功能,在前端开发中经常用到,可以在客户端本地存储数据,类似HTML4的c ...
- Web Storage API的介绍和使用
文章目录 简介 浏览器的本地存储技术 Web Storage相关接口 浏览器兼容性 隐身模式 使用Web Storage API 总结 简介 Web Storage为浏览器提供了方便的key valu ...
- HTML5 高级系列:web Storage 学前端开发要先看这个
HTML5 高级系列:web Storage 学前端开发要先看这个 前言 HTML5 的 web Storage 存储方式有两种:localStorage 和 sessionStorage. 这两种方 ...
最新文章
- R语言ggplot2可视化:为图像中的均值竖线、中位数竖线、 geom_vline添加图例(legend)
- AngularUI Router
- 文本挖掘预处理流程总结(1)— 中文
- 通过key登录ssh
- 添加到界面前获取尺寸
- VMware Player 4.0.2 英文官方原版
- 中国平面设计指导价格
- 机器学习笔记(四)BP神经网络模型
- SetWindowsHookEx全局钩子
- viewpage2简单实现tablayout
- 计算机在服装生产中的应用情况,【服装设计论文】服装设计中计算机信息技术的运用(共1730字)...
- 使用spilt截取文件名后缀时出现的问题
- 撤销性CP-ABE方案研究现状总结 - 2021
- 2010年度十大心理学发现
- 二叉树的基本性质及证明
- JDK8u201安装
- 如何做好数据分析报告(一)
- 自制DIY 机器狗 完全教程 - MIT猎豹Cheetah
- 条码管理系统,助力企业打造轻量级数字化车间
- 【内排序 -- 八大排序】