HTML5 Local Storage
来源:互联网 发布:乒乓球输给日本 知乎 编辑:程序博客网 时间:2024/05/29 04:54
1. window对象sessionStorage 和 localStorage
localStorage 可以在浏览器关闭的情况下长久保存数据,多个标签页直接可以共享数据,但是不能跨浏览器。localStorage的作用域是用协议,主机名,端口来确定的,因此下面的URL直接不能共享数据:
http://www.example.com
http://wap.example.com
http://www.example.com:8080
https://www.example.com
sessionStorage 只能在一个浏览器标签页不关闭的情况下保存数据,多个标签页不能共享数据,一旦标签也关闭数据也就消失了。
2. sessionStorage和localStorage都实现了Storage接口,因此我们可以使用如下属性和方法访问存储的数据:
3. Storage事件
StorageEvent定义
使用如下方法添加时间监听器。当作用范围内的数据改变时,处理方法将被触发:
4. 例子:
参考文档:
http://www.w3.org/TR/webstorage/#the-storage-event
localStorage 可以在浏览器关闭的情况下长久保存数据,多个标签页直接可以共享数据,但是不能跨浏览器。localStorage的作用域是用协议,主机名,端口来确定的,因此下面的URL直接不能共享数据:
http://www.example.com
http://wap.example.com
http://www.example.com:8080
https://www.example.com
sessionStorage 只能在一个浏览器标签页不关闭的情况下保存数据,多个标签页不能共享数据,一旦标签也关闭数据也就消失了。
2. sessionStorage和localStorage都实现了Storage接口,因此我们可以使用如下属性和方法访问存储的数据:
interface Storage { readonly attribute unsigned long length; DOMString? key(unsigned long index); getter DOMString getItem(DOMString key); setter creator void setItem(DOMString key, DOMString value); deleter void removeItem(DOMString key); void clear();};
3. Storage事件
StorageEvent定义
[Constructor(DOMString type, optional StorageEventInit eventInitDict)]interface StorageEvent : Event { readonly attribute DOMString key; readonly attribute DOMString? oldValue; readonly attribute DOMString? newValue; readonly attribute DOMString url; readonly attribute Storage? storageArea;};
使用如下方法添加时间监听器。当作用范围内的数据改变时,处理方法将被触发:
window.addEventListener('storage', printStorageEvent(event), true);function printStorageEvent(e){var log='key=' + e.key +', oldValue=' +e.oldValue + ', newValue=' +e.newValue+', url='+ e.url;document.write(e); }
4. 例子:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body><script type="text/javascript">window.addEventListener('storage', printStorageEvent(event), true);function printStorageEvent(e){var log='key=' + e.key +', oldValue=' +e.oldValue + ', newValue=' +e.newValue+', url='+ e.url;document.write(e); }var i=localStorage.pagecount;if(i){localStorage.pagecount=Number(i)+1;}else{localStorage.pagecount=1;}document.write('local:'+localStorage.pagecount); var j=sessionStorage.pagecount;if(j){sessionStorage.pagecount=Number(j)+1;}else{sessionStorage.pagecount=1;}document.write("session:"+sessionStorage.pagecount);</script></body></html>
参考文档:
http://www.w3.org/TR/webstorage/#the-storage-event
阅读全文
0 0
- HTML5 Local Storage
- html5 local storage and session storage
- HTML5 Local Storage 本地存储
- HTML5 Local Storage 本地存储
- HTML5开发 Local Storage 本地存储
- 深入HTML5: HTML5 本地存储( Local Storage )的前世今生
- 深入HTML5: HTML5 本地存储( Local Storage )的前世今生
- 深入HTML5: HTML5 本地存储( Local Storage )的前世今生
- HTML5本地存储(Local Storage) 的前世今生(二)
- HTML5的local storage存储的数据到底存到哪去了
- HTML5本地存储(Local Storage) 的前世今生(二)
- HTML5 Local Storage( 本地存储) 的前世今生(一)
- HTML5本地存储(Local Storage) 的前世今生(二)
- HTML5 Local Storage( 本地存储) 的前世今生
- HTML5 特性检测:本地存储(Local Storage ,sessionStorage)
- 深入HTML5: HTML5 本地存储( Local Storage )的前世今生 (一)
- 深入HTML5: HTML5 本地存储( Local Storage )的前世今生 (一)
- HTML5移动开发之路(16)——HTML5 Local Storage(本地存储)
- 利用JMeter的Java请求采样器进行rpc接口的性能测试
- javascript addEventListener讲解
- 求1-100内能被3整除,不能被5整除的数字。
- 实例:python图像处理(Pillow+numpy)
- Java文件下载的几种方式
- HTML5 Local Storage
- 元件信息显示位置
- Android 下载文件推荐OKGO
- 静态代码分析
- Android贝塞尔曲线实现水波纹的效果
- Javascript 创建对象的四种方法,类的三种属性,三种方法
- shiro日记②注解使用与常用注解
- Git使用
- BZOJ 1724 [Usaco2006 Nov]Fence Repair 切割木板 贪心+堆