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

Posted 2020-06-22 蓝方人

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

 

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

    1、Cookie

    2、UserData

    3、Flash SharedObject

    4、Google Gears

    5、Web SQL Database

    6、WebStorage

    7、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

    这是本文推荐的一个存储方案，所以会做一个详细介绍。

 

    1、介绍

    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的数据

    注意：1、sessionStorage方法同上。

            2、此方案保存的是字符串，如果是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+支持