localStorage和sessionStorage的使用方法和一些特性介绍

本文主要介绍的是localStorage和sessionStorage的使用方法和一些特性，以及一些其余的存储方式的比较。

 

客服端存储方案包括如下几种：

    一、Cookie

    二、UserData

    三、Flash SharedObject

    四、Google Gears

    五、Web SQL Database

    六、WebStorage

    七、IndexedDB（Indexed Database）

 

把Cookie抛开，以上几种存储方案2-5不建议使用，缘由见下文详解。把Cookie抛开不论，是由于它是不可缺乏的，Cookie的做用是跟服务器进行交互，做为HTTP规范的一部分。而以上其余的方案都是为了在本地“存储”数据而生。

暂时推荐使用第6种方案，可是由于WebStorage只兼容到IE8+ ，因此他须要和UserData配合使用（用于兼容），详解见下文。

 

Cookie

    略过。。。

UserData

    它由Microsoft公司在IE5中引用，是保存在用户本地的一块持久话数据，除非你手动删除或者设置过时时间，不然它将一直保存在本地终端，只有IE5-IE9支持。它借助了DHTML的Behaviour属性来存储本地数据，没个页面最大限制64K数据，每一个站点最大限制640K数据。

缺点：并不是WEB标准，只有IE5-IE9支持，没法有效解决浏览器兼容。

 

Flash SharedObject

    它容许你在本地客户端的硬盘或是服务器上存储全部flash支持的数据(Number, String, Array, Boolean, Object, XML等)，数据会永久性保存，没有过时时间，能够经过设置管理器或调用clear()方法清除。按存放位置能够分为本地共享对象和远程共享对象。默认存储大小为100KB，用户能够手动设置，最大为10M。

缺点：它的缺点就是由于它是Flash。Flash有安全，稳定性差，好系统资源等缺点。

 

Google Gears

    Google于07年发布的一个开源浏览器插件，内置了一个基于SQLite的嵌入式SQL数据库，并提供了统一的API访问数据库。在取得用户受权以后，每一个站点能够在数据库中存储大小不限的数据。可是Google早在chrome 12.0 中就已经放弃了对它的支持。

缺点：就是由于Google都已经放弃它了

 

 

Web SQL Database

   HTML5引入的一个用来处理大量结构化数据的方案。它是使用SQL来操纵客户端数据库的API，规范中使用的语言是SQLlite，可是这个方案基本已经废弃了。由于W3C规范已经中止使用此规范了。

缺点：就是由于W3C已经中止使用此规范，也就是说这是一个废弃的标准。

 

Web Storage

    这是本文推荐的一个存储方案，因此会作一个详细介绍。

 

    一、介绍

    Web Storage是由两部分组成： localStorage、sessionStorage。localStorage用于持久化数据存储，不主动删除，数据是永远不会过时的（包括清除缓存）。sessionStorage顾名思义（session）是用于存储一个会话中的数据，当会话结束数据会随之销毁。所以sessionStorage不能用来做持久化数据存储。

    存储形式：Key value 名值对

    存储空间：  IE：10MB； Chrome4+，Safari4+：2.5MB； Firefox4+，Opera10.5+：5MB

    兼容： IE8+；chrome4+; firefox3.5+ ; safari4+ ;  Opera10.5+

    属性和方法：

    setItem(key,value)              

            将value值存储到本地的key字段

    getItem(key)                       

            获取指定key本地存储的值

    removeItem(key)                

            删除指定key本地存储的值

    clear()                                  

            删除存储的全部数据

    key(index)                            

            根据索引获取一个指定位置的键名

   length

            获取存储的键值对的数量

 

   示列：

    localStorage.setItem("name","Ch"); //存储（修改）一条key值为name的数据，而且value值为：Ch

    localStorage.getItem("name"); //获取Key值为name的value值

    localStorage.reomveItem("name"); //删除Key值为name的数据

    localStorage.clear();//清除全部存储在localStorage的数据

     注意：一、sessionStorage方法同上。

            二、此方案保存的是字符串，若是是JSON数据，得调用stringify()方法转成字符串再保存。

   

    事件：

    storage 当localStorage和sessionStorage的数据产生变化时会触发此事件，storage事件有以下属性：

            storageAera: 表示存储类型(session或者local)

            key: 发生改变项的key

            oldValue: key原来的值

            newValue: key改变后的值

            url：致使key发生改变的url

        示列：

        //假如已存储 localStorage 数据   key:name,value:Ch  

        window.addEventListener("storage",function(e){

            console.log("改变的Key："+e.key);
            console.log("旧值："+e.oldValue);
            console.log("新值："+e.newValue);
            console.log("发生变化的URL："+e.url);

 

        });

        localStorage.setItem("name","huihui");   //所在页面   app/list.html

        上面代码会输出

            改变的Key：name

            旧值：Ch

            新值：huihui

            发生变化的URL：app/list.html

            类型：local

 

    还有一点须要注意，在Firefox和Chrome中对storage事件的触发有点不一样, 自身页面调用setItem()改变某键的值后并无触发window的storage事件, 可是若是同时访问A.html和B.html, 在A页面中调用setItem()改变某键的值后能触发B页面中的storage事件, 反之同理。而在IE9中, 自身页面调用setItem()改变某键的值后也能触发window的storage事件。

缺点：不支持IE7-，如需兼容须要配合UserData使用。
WebStorage容量大、易用、原生支持等优势都使它成为首选的本地存储方案，固然它的安全性也较差，不能用它来保存敏感信息。

 

IndexedDB

Indexed Database 是Oracle于2009年提出的，简称IndexedDB，是一种能让你在用户的浏览器中持久地存储结构化数据的数据库，为web应用提供了丰富的查询能力。它使用对象来保存数据，按域名分配独立空间，一个独立域名下能够建立多个数据库，每一个数据库能够建立多个对象存储空间，一个对象存储空间至关于一个数据库表，能够存储多个对象数据。目前仅Chrome11+/Firefox4+/IE10支持。Firefox4+支持最大存储50MB的数据(移动端5MB)，chrome11+支持最大存储5MB的数据。

缺点：目前仅Chrome11+/Firefox4+/IE10+支持