一、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>