html5和web的存储对象,HTML5 本地存储Web Storage

Web Storage 功能，顾名思义，就是在web上针对客户端本地存储数据的功能，具体来说Web Storage 分为两种：

sessionStorage:

将数据保存在session对象中，所谓session是指用户在浏览某个网站中，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

localStorage:

将数据保存在客户端本地的硬件设备(通常指硬盘，当然可以是其他的硬盘设备)中，即是浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时，仍然可以继续使用。

sessionStorage与localStorage区别:

这两者的区别在于sessionStorage为临时保存，而localStorage为永久保存。

对比session和cookie的区别主要体现在一下三点：

1.容量大，IE8里面是10M, 不同的浏览器支持的大小不一致。

2. 不会随着会话来传输。

3. 读取和写入方便，有现成的api

不管是sessionStorage, 还是localStorage, 可使用的API都相同，常用的有如下几个方法：

1.保存数据： localStorage.setIterm(key,value);     sessionStorage.setItem(key, value);

2.读取数据： localStorage.getIterm(key);              sessionStorage.getItem(key);

3.删除单个数据： localStorage.removeItem(key)   sessionStorage.removeItem(key);

4.删除所有数据： localStorage.clear();                    sessionStorage.clear();

两个都有属性length 表示Key的个数，也即key长度：

var keylength1 = localStorage.length; var keyLength2 = sessionStorage.length;

如上，key和value都必须为字符串，换言之，Web Storage的API只能操作字符串。

Web storage 的浏览器支持情况的判断：

在使用web storage时，首先判断是否支持该功能，有些浏览器不支持(IE)，只有支持才可以使用，判断方法如下：

if(window.localStorage){  //或者 window.sessionStorage

alert("浏览支持localStorage")

}else{

alert("浏览暂不支持localStorage")

}

//或者

if(typeof window.localStorage == 'undefined') {  //或者 window.sessionStorage

alert("浏览暂不支持localStorage")

}

Web Storage使用实例代码：

HTML>

HTML5 Web Storage Demo

function $(id){ return document.getElementById(id);}

function savesessionStorage(id){sessionStorage.setItem('message',$(id).value);}

function loadsessionStorage(id){$(id).innerHTML=sessionStorage.getItem("message");}

function savelocalStorage(id){localStorage.setItem("message",$(id).value);}

function loadlocalStorage(id){$(id).innerHTML=localStorage.getItem("message");}

sessionStorage Demo

localStorage Demo

参考文章：