HTML5 本地存储Web Storage

jopen 8年前

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使用实例代码：

<!DOCTYPE HTML>  <html>  <head>  <meta charset="utf-8" />  <title>HTML5 Web Storage Demo</title>  <script type="text/javascript">  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");}  </script>  </head>  <body>  <div>  <h2>sessionStorage Demo</h2>  <p id="sessionMsg"></p>  <input type="text" id="sessionInput" />  <input type="button" value="保存数据" onclick="savesessionStorage('sessionInput');" />  <input type="button" value="读取数据" onclick="loadsessionStorage('sessionMsg');" />  <br />  <h2>localStorage Demo</h2>  <p id="localMsg"></p>  <input type="text" id="localInput" />  <input type="button" value="保存数据" onclick="savelocalStorage('localInput');" />  <input type="button" value="读取数据" onclick="loadlocalStorage('localMsg');" />  </div>  </body>  </html>

HTML5 本地存储Web Storage