（五）HTML5本地存储——Web Storage

曾经终败给现在 2022-08-01 20:29 214阅读 0赞

Web应用的发展，使得客户端存储使用得也越来越多，而实现客户端存储的方式则是多种多样。最简单而且兼容性最佳的方案是Cookie，但是作为真正的客户端存储，Cookie则存在很多致命伤。此外，在IE6及以上版本中还可以使用[userData Behavior][]、在Firefox下可以使用[globalStorage][]、在有Flash插件的环境中可以使用[Flash Local Storage][]，但是这几种方式都存在兼容性方面的局限性，因此真正使用起来并不理想。针对以上情况，HTML5中给出了更加理想的解决方案：假如你需要存储复杂的数据则可以使用[Web Database][]，可以像客户端程序一样使用SQL（不过Web Database标准当前正陷于僵局之中，而且目前已经实现的浏览器很有限）；假如你需要存储的只是简单的用key/value对即可解决的数据则可以使用[Web Storage][]。

HTML5中与本地相关的有两个重要的内容:Web Storage与本地数据库。其中，Web Storage存储机制是对HTML4种cookies机制的一个改善。由于cookies存储机制有很多缺点，HTML5不再使用它们，转而使用改良后的Web Storage存储机制。本地数据库是HTML5新增的一个功能，使用它可以在客户端本地建立一个数据库，原本必须要保存到服务器端数据库中的内容现在可以直接保存到客户端本地，大大减轻了服务器端的负担，同时加快了访问数据的速度。

本文主要从各个方面介绍一下Web Storage的具体情况。

## **sessionStorage与localStorage** ##

顾名思义，Web Storage功能就是在web上储存数据功能，这里的储存数据是针对客户端本地而言的。具体来说，Web Storage实际上由两部分组成：sessionStorage与localStorage。

sessionStorage将数据保存在session对象中，session是指用户在浏览某个网站时，从进入网站到浏览器关闭多经过的这段时间，也就是用户浏览这个网站所花费的时间，session对象可以用来保存在这段时间内所要求的宝训的数据。总结如下：sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

将数据保存在客户端本地的硬件设备（通常指硬盘，也可以是其它硬件设备）中，即使浏览器关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。总结：localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

两者的区别：sessionStorage为临时保存；localStorage为永久保存；

**会话级别的本地存储：sessionStorage**

在Html5中增加了一个Js对象：sessionStorage；通过此对象可以直接操作存储在浏览器中的会话级别的WebStorage。存储在sessionStorage中的数据首先是Key-Value形式的，另外就是它跟浏览器当前会话相关，当会话结束后，数据会自动清除，跟未设置过期时间的Cookie类似。

sessionStorage提供了四个方法来辅助我们进行对本地存储做相关操作。

*  （1）setItem(key,value)：添加本地存储数据。两个参数，非常简单就不说了。
 *  （2）getItem(key):通过key获取相应的Value。
 *  （3）removeItem(key):通过key删除本地数据。
 *  （4）clear():清空数据。

对于JS的学习和调试必须得有Chrome的调试工具辅助才能事半功倍。当然Chrome也是我最喜爱的Web开发辅助工具，非常简单F12快捷键就立即打开工具了，包括IE也是这个快捷键。通过下图就可以查看当前浏览器中的sessionStorage数据。

**永久本地存储：localStorage**

在最新的JS的API中增加了localStorage对象，以便于用户存储永久存储的Web端的数据。而且数据不会随着Http请求发送到后台服务器，而且存储数据的大小机会不用考虑，因为在HTML5的标准中要求浏览器至少要支持到4MB.所以，这完全是颠覆了Cookie的限制，为Web应用在本地存储复杂的用户痕迹数据提供非常方便的技术支持。那接下里分别介绍一下localStorage的常用的方法，当然基本上跟sessionStorage是一致的。

localStorage提供了四个方法来辅助我们进行对本地存储做相关操作。

## **为什么选择Web Storage而不是Cookie？** ##

与Cookie相比，Web Storage存在不少的优势，概括为以下几点：

1. 存储空间更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。

2. 存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。

3. 更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。

4. 独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。

## **Web Storage缺陷与不足** ##

Web Storage的缺陷主要集中在其安全性方面，具体体现在以下两点：

1. 浏览器会为每个域分配独立的存储空间，即脚本在域A中是无法访问到域B中的存储空间的，但是浏览器却不会检查脚本所在的域与当前域是否相同。即在域B中嵌入域A中的脚本依然可以访问域B中的数据。

2. 存储在本地的数据未加密而且永远不会过期，极易造成隐私泄漏。也许需要像保存密码一样询问用户是在用私人电脑还是公共电脑来决定是否将数据保存在本地。

**sessionStorage与localStorage读写数据时的基本用法**

1、sessionStorage

保存数据：

sssionStorage.setItem('key','value'); //或者sessionStorage.key = 'value';

读取数据：

变量 = sessionStorage.getItem('key'); //或者变量 = sessionStorage.key;

若使用sessionStorage读取或保存数据，则使用sessionStorage对象并调用该对象的读写方法；

2、localStorage

保存数据：

localStorage.setItem('key','value'); //或者localStorage.key = 'value';

读取数据：

变量 = localStorage.hetItem('key'); //或者变量 = localStorage.key;

若使用localStorage读取或保存数据，则使用localStorage对象并调用该对象的读写方法；

**两种方法的区别：**

使用sessionStorage方法时，如果关闭了浏览器，这个数据就丢失了，下一次打开浏览器时，读不到任何的数据；而使用localStorage方法时，即使浏览器关闭了，下次打开浏览器仍然能读取到被保存的数据。不过，数据保存时按浏览器进行保存的，也就是说，打开别的浏览器是读取不到下哦案前在浏览器中保存的内容的。

**示例如下**

exercise.html

<!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <title>Web Storage示例</title>
        <script tyep="text/javascript" src="script.js" ></script>
    </head>
    <body>
        <h1>Web Storage示例</h1>
        <p id="msg"></p>
        <input type="text" id="input">
        <input type="button" value="保存数据" οnclick="saveStorage('input')";>
        <input type="button" value="读取数据" οnclick="loadStorage('msg')">
    </body>
    </html>

script.js

//sessionStorage示例
     function saveStorage(id){
         var target = document.getElementById(id);
         var str = target.value;
         sessionStorage.setItem("message",str);
         //或sessionStorage.message=str;
     }
     function loadStorage(id){
         var target = document.getElementById(id);
         var msg = sessionStorage .getItem("message");
         //或var msg = sessionStorage.message;
         target.innerHTML = msg;
     }
    //localStorage示例
    function saveStorage(id){
        var target = document.getElementById(id);
        var str = target.value;
        localStorage.setItem("message",str);
        //或localStorage.message=str;
    }
    function loadStorage(id){
        var target = document.getElementById(id);
        var msg = localStorage.getItem("message");
        //或var msg=localStorage.message;
        target.innerHTML = msg;
    }

运行结果：  
![Center][]

[userData Behavior]: http://msdn.microsoft.com/en-us/library/ms531424%28v=VS.85%29.aspx
[globalStorage]: https://developer.mozilla.org/en/dom/storage
[Flash Local Storage]: http://www.macromedia.com/support/documentation/en/flashplayer/help/help02.html
[Web Database]: http://dev.w3.org/html5/webdatabase/
[Web Storage]: http://dev.w3.org/html5/webstorage/
[Center]: /images/20220731/f400081ff65f4b4ba510de9f46c788c1.png