html5的window.localStorage
来源:互联网 发布:网络动漫产品黑名单 编辑:程序博客网 时间:2024/05/15 03:55
一、localStorage解惑
1、localstorage是HTML5提供的客户端储存数据的新方法
2、没有时间限制,不会自动清除,但是可以通过一些”手段”达到自动清除的效果
3、对于不同网站,数据储存在不同的区域,并且每个网站只能访问自身的数据,(同源:规则、主机、端口相同)
4、对于浏览器,每个浏览器都有自己的localStorage储存空间,相互独立,互不干扰也不能互相访问,不需要以每个页面为单位。
5、兼容性:IE8.0+ 、 Firefox3.0+ 、 opera10.5+ 、Chrome4.0+ 、 Safari4.0+ 、 ipone2.0+ 、 Android2.0+,对于不支持localStorage的,可以使用下面的代码让浏览器看上去支持localStorage,对于不支持localStorage的”一样可以使用localStorage的方法”储存数据,实际上内部用的cookie
PS:localStorage存储大小5M、、、cookie 貌似4k左右
if (!window.localStorage) { window.localStorage = { getItem: function (sKey) { if (!sKey || !this.hasOwnProperty(sKey)) { return null; } return decodeURIComponent(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1")); }, key: function (nKeyId) { return decodeURIComponent(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); }, setItem: function (sKey, sValue) { if(!sKey) { return; } document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; this.length = document.cookie.match(/\=/g).length; }, length: 0, removeItem: function (sKey) { if (!sKey || !this.hasOwnProperty(sKey)) { return; } document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; this.length--; }, hasOwnProperty: function (sKey) { return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); } }; window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length; }
6、判断浏览器是否支持localStorage
if(window.localStorage){
//…..当浏览器支持时执行
}else{
//…..当浏览器不支持时执行
}
7、localStorage对象的方法,设置、获取、删除
7.1)、设置有三种方法:
localStorage.setItem('username','jieke'); //或localStorage['username'] = 'jieke'; //或localStorage.username = 'jieke';
7.2)、获取也有四种方法:
var res = localStorage.getItem('username'); //或var res = localStorage['username']; //或var res = localStorage.username; 、//或var res = localStorage.key(index); //这个方法用于遍历所有的数据很方便,注意:返回的是key
7.3)、删除有两种方法:
localStorage.removeItem(key); //无返回值,一次只删除一条,如果没有对应的key则不执行任何操作localStorage.clear(); //删除同源存储列表中的所有数据
7.4)、获取有多少条数据:var res = localStorage.length;
8、localStorage和sessionStorage的区别,生命周期和可见范围不一样
8.1)、sessionStorage数据只会保存到存储他的当前标签页关闭,localStorage数据的生命期比窗口或浏览器长
8.2)、sessionStorage数据只在构建它们的标签页内可见,localStorage数据可被同源(规则、主机、端口相同)的每个窗口或标签页访问
PS:sessionStorage是以一个标签页为单位,当打开一个标签页,这个标签页会为它划一块空间存放sessionStorage的数据,当这个标签页关闭时,这块空间清除。如果点击一个链接,在当前页面打开(target=”_self”),那么新页面能访问之前那个页面的sessionStorage对象,这就是以一个标签页为单位。当数据不需要长时间保存到下次继续使用的情况下可以使用sessionStorage
PS:localStorage是以某种浏览器为单位,当用某种浏览器打开一个网站的某个有localStorage数据的网页时,这个浏览器会为一个源(同规则、主机、端口)划一块空间存放localStorage数据,一旦存放,只有手动删除数据才会消失
PS:web-storage-cache项目 https://github.com/WQTeam/web-storage-cache/releases
二、Web Storage的事件机制
1、当储存的内容有更新时的通知机制:通知对此内容添加了监听的页面
window.addEventListener(‘storage’, storageEvent. true); //给window添加storage事件,并指定事件处理函数storageEvent,当调用这个函数时,会传入一个事件对象
function storageEvent(e){ //… }
//假设:window添加了storage事件,当事件触发时调用windowStorage函数,函数如下:
function windowStorage(storageEvent){
//…………
storageEvent(e); //这时会传递一个事件对象给我们自定义的事件处理函数,这个事件对象很重要
}
//事件对象StorageEvent接口如下: interface StorageEvent : Event{ readonly attribute DOMString key; //被更新的那条数据的key readonly attribute any oldValue; //被更新的那条数据的更新前的值 readonly attribute any newValue; //被更新的那条数据的更新后的值 readonly attribute DOMString url; //当前页面的链接 readonly attribute Storage storageArea; //指向值发生改变的localStorage或sessionStorage对象的引用 }
思路:网站a中有页面b、c,b添加了storage事件,c中有setItem对localStorage的某条数据进行修改的数据,这时:先访问了b,然后去访问c,会触发b中的storage事件
三、JSON对象的存储
1、demo01.html
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>1</title></head><body> <input type="text" name="username" id="username"/> <a href="demo02.html" target="_self">go to demo02</a><script> function loadData(){ var name = JSON.parse(sessionStorage.getItem('name')); if(!!name){ alert(name.name); } } function unload(){ var username = document.getElementById('username').value; if(!username){ username = '没有输入'; } var val = '{"name":"'+username+'"}' sessionStorage.setItem('name', val); } window.addEventListener('load', loadData, true); window.addEventListener('unload', unload, true);</script></body></html>
2、demo02.html
<script> function loadData(){ var name = JSON.parse(sessionStorage.getItem('name')); if(!!name){ alert(name.name); } } function unload(){ var username = document.getElementById('username').value; if(!username){ username = '没有输入'; } var val = '{"name":"'+username+'"}' sessionStorage.setItem('name', val); } window.addEventListener('load', loadData, true); window.addEventListener('unload', unload, true);</script>
- html5的window.localStorage
- HTML5 localStorage 的使用
- 【HTML5】localstorage的用法
- Html5 表单的LocalStorage
- HTML5的localStorage对象
- £. 关于 HTML5 本地缓存 Window.localStorage
- html5的localStorage的操作
- html5的localStorage的操作
- HTMl5的sessionStorage和localStorage
- HTMl5的sessionStorage和localStorage
- HTMl5的sessionStorage和localStorage
- HTML5的localStorage本地化存储
- html5的web存储localStorage
- HTMl5的sessionStorage和localStorage
- HTMl5的sessionStorage和localStorage
- HTMl5的sessionStorage和localStorage
- html5中localStorage的用法
- HTMl5的sessionStorage和localStorage
- Java修饰符
- Lable换行
- JavaScript function函数种类
- 为什么视频用udp不用tcp
- 分库分表中间件汇总
- html5的window.localStorage
- bzoj1043 下落的圆盘 计算几何
- 聊天没有话题?试试这十二种技巧
- 启动hbase时候SLF4J多个绑定问题
- Linux/Unix下tar命令详解
- 被面试到的一则算法题目: 无序列数组里面,求最长的连续数的长度
- 弹性盒子--更便捷的布局
- 不允许一个用户使用一个以上用户名与服务器或共享资源的多重连接
- 通过命令行的形式调用exe执行直到返回