第九章 Web Storage API

 

9.1 HTML5 Web Storage概述

       使用HTML5 Web Storage API，开发者可以讲数据存储在JavaScript对象中，对象在页面加载时保持，并且容易获取。通过使用sessionStorage或localStorage，在打开新窗口或新标签页以及重新启动浏览器时，开发人员可以选择是否激活这些数据。存储的数据不会在网络上传输，重新浏览网页时也容易获取到。此外，使用Web Storage API可以保存高达数兆字节的大数据。因此，Web Storage适用于存储超出cookie大小限制的文档和文件数据。

9.2 HTML5 Web Storage的浏览器支持情况

9.3 使用HTML5 Web Storage API

       在Web Storage API中，特定域下的storage数据库可直接利用window对象访问。因此，确定用户的浏览器是否支持Web Storage API，只要检查它是否存在window.localStorage或window.sessionStorage就行了。

9.3.1 检测浏览器的支持性

9.3.2 设置和获取数据

       设置数据值很简单，只需执行一条语句即可，下面给出了完整的语句声明：

       window.sessionStorage.setItem(‘myFirstKey’,’myFirstValue’);

9.3.3 封堵数据泄漏

       对于设置到sessionStorage中的对象，只要浏览器窗口（或标签）不关闭他们就会一直存在。当用户关闭窗口或浏览器，sessionStorage数据将被清除。     

9.3.4 localStorage与sessionStorage

       localStorage和sessionStorage在编程上唯一的区别是访问它们的名称不同，分别是通过localStorage和sessionStorage对象来访问它们的。

      localStorage和localStorage的区别

      

sessionStorage	localStorage
数据只保存到存储它的窗口或标签页关闭时	数据的生命期比窗口或浏览器的生命期长
数据只在构建它们的窗口或者标签也内可见	数据可悲同源的每个窗口或者标签页共享

9.3.5 Web Storage API的其他特性和函数

       在使用了sessionStorage或localStorage对象的文档中，我们可以通过window对象来获取它们。除了名字和数据的生命周期外，它们的功能完全相同且均实现了Storage接口。

       interface Storage{

       readonly attribute unsigned long length;

       getter DOMString key(in unsigned long index);

       getter any getIten(in DOMString key);

       setter creator void setItem(in DOMString key,in any data);

       deleter void removeItem(in DOMString key);

       void clear();

}

       下面详细介绍接口中的特性和函数。

（1） length特性表示目前Storage对象中存储的键值对的数量。请记住，Storage对象是同源的，这意味着Strorage对象的项数（和长度）只反映同源情况下的项数。

（2）  key(index)方法允许获取一个制定位置的键。一般而言，最有用的情况是遍历特定Storage对象的所有键。键的索引从零开始，即第一个键的索引是0，最后一个键的索引是index(长度-1)。获取到键后，你可以用它来获取其响应的数据。除非键本身或者在它前面的键被删除，否则其索引值会在给定Storage对象的生命周期内一直保留。

（3） getItem(key)函数是根据给定的键返回相应数据的一种方式。另一种方式是将Storage对象当做数组，而将键作为数组的索引。在这两种情况下，如果Storage中不存在指定键，则返回null。

（4） 与getItem(key)函数相似，setItem(key,value)函数能够讲数据存入制定键对应的位置，如果值已存在，则替换原值。需要注意的是设置数据可能会出错。如果用户已关闭网站的存储，或者存储已达到其最大容量，那么此时设置数据将抛出QUOTA_EXCEEDED_ERR错误。

（5）removeItem(key)函数的作用当然是删除数据项了，如果数据存储在键参数下，则调用此函数会将响应的数据项删除。如果键参数没有对应数据，则不执行任何操作。

提示

跟某些集成或数据框架不同，删除数据项时不会将原有数据作为结果返回。在删除操作前请确保已经存储了相应数据的副本。

（6）clear()函数，它能删除存储列表中的所有数据。空的Storage对象调用clear()方法也是安全的，此时的调用不执行任何操作。

9.3.6 更新Web Storage后的通信

       HTML5 Web Storage API内建了一套事件通知机制，它可以将数据更新通知发送给感兴趣的监听者。无论监听窗口本身是否存储过数据，与执行存储操作的窗口同源的每个窗口的window对象上都会触发Web Storage事件。

         像下面这样，添加事件监听器即可接收同源窗口的Storage事件：

         window.addEventListener(“stotage”,displayStorageEvent,true);

         代码中事件类型参数是storage，表明我们感兴趣的是Storage事件，这样一来，只要有同源的Storage事件发生（包括SessionStorage和LocalStorage触发的事件），已注册的所有事件监听器作为事件处理程序就会接收到相应的Storage事件。

         StorageEvent接口

         interface StorageEvent:Event{

                readonly attribute DOMString key;

                readonly attribute any oldValue;

readonly attribute any newValue;

readonly attribute DOMString url;

readonly attribute Storage storageArea;

         }

（1）   key属性包含了存储中被更新或删除的键。

（2）   oldValue属性包含了更新前键对应的数据，newValue属性包含更新后的数据。如果是新添加的数据，则oldValue属性值为null，如果是被删除的数据，则newValue属性值为null。

（3）   url属性指向Storage事件发生的源。

（4）   StorageArea属性是一个引用，它指向值发生改变的localStorage或sessionStorage。

9.3.7 探索Web Storage

9.4 构建HTML5 Web Storage应用

9.5 浏览器数据库存储展望

9.6 进阶功能

9.6.1 JSON对象的存储

       JSON是一种讲对象与字符串可以相互表示的数据转换标准。十余年来，JSON一直是通过HTTP将对象从浏览器传送到服务器的一种常用格式。现在，我们可以通过序列化复杂对象将JSON数据保存在Storage中，以实现复杂数据类型的持久化。

9.6.2 共享窗口

<!--EndFragment-->