[HTML5]localStorage、sessionStorage使用详解-建站笔记

HTML的本地存储,相当于一个超大型的cookie,可以通过浏览器存储相关的数据。

localStorage

持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

sessionStorage

本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,前者一直存在本地,后者只是伴随session,窗口一旦关闭就没了。

二者的用法完全相同。

判断浏览器是否支持localStorage

if(window。

localStorage)

alert(支持localStorage);

}else

alert(不支持localStorage);

或者

if(typeofwindow。

localStorage==undefined)

alert(浏览暂不支持localStorage);

三种设置本地存储的方法

localStorage。

a=php

localStorage[b]=html5

localStorage。

setItem(c,JQuery);

三种访问本地存储的方法

localStorage。

a;

localStorage[b];

localStorage。

getItem(c);

其他扩展

localStorage。

removeItem();//清除

localStorage。

clear();//清除所有

localStorage。

length;//获得多少键

localStorage。

key;//获得存储的键内容

localStorage。

getItem(localStorage。

key(0))

示例代码



DOCTYPEhtml

html

head

metacharset=UTF-8

titleHTML5localStorage、sessionStorage/title

/head

body

inputtype=buttononclick=set_item()value=存值/

inputtype=buttononclick=get_item()value=取值/

inputtype=buttononclick=delete_item()value=删除/

script

//localStorage存值永久有效

functionset_item(){

varuser={};

user。

name=AdamLi

user。

age=25;

user。

home=China

localStorage。

setItem(userinfo,JSON。

stringify(user));

//localStorage取值

functionget_item(){

vardata=JSON。

parse(localStorage。

getItem(userinfo));

alert(name:+data。

name+ age:+data。

age+ home:+data。

home);

//localStorage删除指定键对应的值

functiondelete_item(){

localStorage。

removeItem(userinfo

alert(localStorage。

getItem(userinfo));

/script

/body

/html

总结

sessionStorage使用方法请参照localStorage使用示例,只需要把local换成session就可以了。

实际应用要用哪个关键看你需求了,如果是要永久保存的,那么就请使用localStorage方法存取值,如果是要浏览关闭会话结束就清除缓存的,当然就得选择sessionStorage方法了

未经允许不得转载:建站笔记[HTML5]localStorage、sessionStorage使用详解

分享到:更多()

标签:HTML5本地存储使用详解HTML5的localStorage使用详解HTML5的sessionStorage使用详解

上一篇:[jQueryEasyUI]datagrid的弹出form增删改代码