当前位置:首页 > 开发 > Web前端 > 前端 > 正文

第九章 Web Storage API

发表于: 2012-03-13   作者:bsr1983   来源:转载   浏览次数:
Web
摘要:   9.1 HTML5 Web Storage概述        使用HTML5 Web Storage API,开发者可以讲数据存储在JavaScript对象中,对象在页面加载时保持,并且容易获取。通过使用sessionStorage或localStorage,在打开新窗口或新标签页以及重新启动浏览器时,开发人员可以选择是

 

9.1 HTML5 Web Storage概述

       使用HTML5 Web Storage API,开发者可以讲数据存储在JavaScript对象中,对象在页面加载时保持,并且容易获取。通过使用sessionStoragelocalStorage,在打开新窗口或新标签页以及重新启动浏览器时,开发人员可以选择是否激活这些数据。存储的数据不会在网络上传输,重新浏览网页时也容易获取到。此外,使用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.localStoragewindow.sessionStorage就行了。

9.3.1 检测浏览器的支持性

9.3.2 设置和获取数据

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

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

9.3.3 封堵数据泄漏

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

9.3.4 localStoragesessionStorage

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

      localStoragelocalStorage的区别

      

sessionStorage

localStorage

数据只保存到存储它的窗口或标签页关闭时

数据的生命期比窗口或浏览器的生命期长

数据只在构建它们的窗口或者标签也内可见

数据可悲同源的每个窗口或者标签页共享

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

       在使用了sessionStoragelocalStorage对象的文档中,我们可以通过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)函数的作用当然是删除数据项了,如果数据存储在键参数下,则调用此函数会将响应的数据项删除。如果键参数没有对应数据,则不执行任何操作。

提示

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

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

9.3.6 更新Web Storage后的通信

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

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

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

         代码中事件类型参数是storage,表明我们感兴趣的是Storage事件,这样一来,只要有同源的Storage事件发生(包括SessionStorageLocalStorage触发的事件),已注册的所有事件监听器作为事件处理程序就会接收到相应的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属性是一个引用,它指向值发生改变的localStoragesessionStorage

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

第九章 Web Storage API

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
Web Storage是HTML5 API提供一个新的重要的特性; 最新的Web Storage草案中提到,在web客户端可用ht
Web Storage是HTML5 API提供一个新的重要的特性; 最新的Web Storage草案中提到,在web客户端可用ht
简介 HTML5 web storage, better than cookies. more secure and faster data store in name/value
一、Wep API 定义 官方定义如下,强调两个关键点,即可以对接各种客户端(浏览器,移动设备),构建
Web Storage 功能,顾名思义,就是在web上针对客户端本地存储数据的功能,具体来说Web Storage 分为
在介绍WebApi这个小demo前,先来简单说一下OAuth这个东西。 OAuth开放授权,用户可以对自己的资源进
ASP.NET Web API 包含下列特性: 先进的 HTTP 编程模型: 使用新的强类型的 HTTP 对象模型直接操作
摘自http://blog.csdn.net/fangxing80/article/details/7318289 在刚刚发布的 ASP.NET MVC 4 中,有
自承载Web API 前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnbl
Web API路由 Asp.Net Web API 导航   Asp.Net Web API第一课——入门 http://www.cnblogs.com/aehy
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号