第九章 Web Storage API

最新推荐文章于 2024-09-16 08:47:17 发布

bsr1983

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量147

点赞数

分类专栏： HTML5 文章标签： json 数据库大数据

本文链接：https://blog.csdn.net/bsr1983/article/details/84167879

版权

HTML5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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接口