html5localstorage生命周期,HTML5LocalStorage本地存储

localStorage和sessionStorage同样都是用来存储客户端临时信息的对象,他们均只能存储字符串类型的对象

localStorage生命周期是永久&＃xff0c;这意味着除非用户显示在浏览器提供的UI上清除localStorage信息&＃xff0c;不然这些信息将永远存在

sessionStorage生命周期为当前窗口或标签页&＃xff0c;一旦窗口或标签页被永久关闭了&＃xff0c;那么全部经过sessionStorage存储的数据也就被清空了

ps:不一样浏览器没法共享localStorage或sessionStorage中的信息。相同浏览器的不一样页面间能够共享相同的localStorage(页面属于相同域名和端口)&＃xff0c;可是不一样页面或标签页间没法共享sessionStorage的信息。这里须要注意的是&＃xff0c;页面及标签页仅指顶级窗口&＃xff0c;若是一个标签页包含多个iframe标签且他们属于同源页面&＃xff0c;那么他们之间是能够共享sessionStorage的

在HTML5中&＃xff0c;本地存储是一个window的属性&＃xff0c;包括localStorage和sessionStorage

1. 首先天然是检测浏览器是否支持本地存储(如localStorage)

if(window.localStorage){

alert(&＃39;This browser supports localStorage&＃39;);

}else{

alert(&＃39;This browser does NOT support localStorage&＃39;);

}

2. 往 localStorage 里边设值

localStorage.name &＃61; &＃39;zs&＃39;;//设置name为"zs"

localStorage["name"] &＃61; "ls";//设置name为"ls"

localStorage.setItem("name","ww");//设置name为"ww"

3. 获取localStorage里边的值

localStorage.name

localStorage["name"]

localStorage.getItem("name")

另外&＃xff0c;HTML5还提供了一个key()方法

var storage &＃61; window.localStorage;

function showStorage(){

for(var i&＃61;0;i

//key(i)得到相应的键&＃xff0c;再用getItem()方法得到对应的值

document.write(storage.key(i)&＃43; " : " &＃43; storage.getItem(storage.key(i)) &＃43; "
");

}

}

4. 清除localStorage里边的值

localStorage.removeItem("name")        // 删除name

localStorage.clear()    //清除全部

5. localStorage 事件

HTML5的本地存储&＃xff0c;还提供了一个storage事件&＃xff0c;能够对键值对的改变进行监听&＃xff0c;使用方法以下

if(window.addEventListener){

window.addEventListener("storage",handleStorage,false);

}else if(window.attachEvent){

window.attachEvent("onstorage",handleStorage);

}

function handleStorage(e){

if(!e){e&＃61;window.event;}

//showStorage();

}

对于事件变量e&＃xff0c;是一个StorageEvent对象&＃xff0c;提供了一些实用的属性&＃xff0c;能够很好的观察键值对的变化Javascript

Propertyjava

Typejson

Description浏览器

keysession

Stringthis

The named key that was added, removed, or moddifiedurl

oldValuespa

Any对象

The previous value(now overwritten), or null if a new item was added索引

newValue

Any

The new value, or null if an item was added

url/uri

String

The page that called the method that triggered this change

另外&＃xff0c;目前Javascript使用很是多的json格式&＃xff0c;若是但愿存储在本地&＃xff0c;能够直接调用JSON.stringify()将其转为字符串。读取出来后调用JSON.parse()将字符串转为json格式

var details &＃61; {author:"xxx","description":"xxx"};

storage.setItem("details",JSON.stringify(details));

details &＃61; JSON.parse(storage.getItem("details"));

封装localStorage

var LS &＃61; {

set : function(key, value){

//在iPhone/iPad上有时设置setItem()时会出现诡异的QUOTA_EXCEEDED_ERR错误

//这时通常在setItem以前&＃xff0c;先removeItem()就ok了

if( this.get(key) !&＃61;&＃61; null )

this.remove(key);

localStorage.setItem(key, value);

},

//查询不存在的key时&＃xff0c;有的浏览器返回undefined&＃xff0c;这里统一返回null

get : function(key){

var v &＃61; localStorage.getItem(key);

return v &＃61;&＃61;&＃61; undefined ? null : v;

},

remove : function(key){ localStorage.removeItem(key); },

clear : function(){ localStorage.clear(); },

each : function(fn){

var n &＃61; localStorage.length, i &＃61; 0, fn &＃61; fn || function(){}, key;

for(; i

key &＃61; localStorage.key(i);

if( fn.call(this, key, this.get(key)) &＃61;&＃61;&＃61; false )

break;

//若是内容被删除&＃xff0c;则总长度和索引都同步减小

if( localStorage.length

n --;

i --;

}

}

}

}