第8章本地存储重点.doc

第8章 本地存储 本章工作任务 Web Storage 本地数据库 indexedDB数据库  本章简介 本章将介绍HTML 5中与本地存储相关的两个重要内容-Web Storage与本地数据库。其中，Web Storage存储机制是对HTML 4中cookies存储机制的一个改善。由于cookies存储机制有很多缺点，HTML 5不再使用它，转而使用改良后的Web Storage存储机制。本地数据库是HTML 5中新增的一个功能，使用它可以在客户端本地建立一个数据库，原本必须要保存在服务器端数据库中的内容现在可以直接保存在客户端本地了，这大大减轻了服务器的负担，同时也加快了访问数据的速度。 学习内容： 掌握Web Storage的基本概念，了解sessionStorage和locaIStorage，以及两者之间的区别，掌握sessionStorage和locaIStorage的使用方法，能够使用这两者进行复杂数据的存储，能够使用这两者进行JavaScript对象的存储。 掌握本地数据库的基本概念，掌握SQLLite本地数据库的基本概念及其使用够使用openDatabase方法创建与打开SQLLite数据库，能够使用transactionin方法进行 SQLLite数据库中事务的处理，能够结合使用transaction方法与executeSql方法来实现数据在SQLLite数据库中的增、删、查、改。 掌握indexedDB数据库的基本概念及其使用方法，能够在脚本代码中连接indexedDB数据库，掌握indexedDB数据库中对象仓库、索引与事务的基本概念及其分类，能够在版本更新事务中创建对象仓库与索引，能够在只读事务中获取对象仓库中的一条数据或使用游标检索多条数据，能够在读写事务中向对象仓库中追加、修改或删除数据。 8.1 Web Storage 8.1.1 Web storage概述 在HTML5中，除了Canvas元素之外，另一个新增的非常重要的功能是可以在客户端地保存数据的Web Storage功能。我们知道，在HTML 4中可以使用cookies在客户端保存诸如用户名等简单的用户信息，但通过长期的使用，人们发现用cookies储存永久数据存在以下几个问题。 大小：cookies的大小被限制在4KB。 带宽：cookies是随HTTP事务一起被发送的，因此会浪费一部分发送cookies时使用的带宽。 复杂性：要正确地操纵cookies是很困难的。 针对这些问题，在HTML 5中，重新提供了一种在客户端本地保存数据的功能，它就是Web Storage功能。 顾名思义，Web Storage功能就是在Web上储存数据的功能，这里的储存是针对客户端本地而言的。具体来说，Web Storage又分为两种： sessionStorage 将数据保存在session对象中。session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。 localStorage 将数据保存在客户端本地的硬件设备（通常指硬盘，也可以是其他硬件设备）中，即使 浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。 这两者的区别在于，sessionStorage为临时保存，而localStorage为永久保存。 目前为止，Firefox 3.6以上版本、Chrome 6以上版本、Safari 5以上版本、Opera 10.50以上版本、IE 8以上版本的浏览器支持session-Storage与localStorage的使用。 接下来，让我们具体看一下sessionStorage与localStorage的使用示例。 首先，需要准备一个用来保存数据的网页。在示例网页中，我们在页面上放置的控件如表8-1所示。 表8-1 Web Storage示例的页面中的元素 元素 ID 用途 input type=text input 输入数据 p msg 显示数据 button 保存数据 button 保存数据 该示例的HTML页面代码如代码清单8-1所示。 代码清单8-1 Web Storage示例的HTML页面代码 ! DOCTYPE html head meta charset= UTF-8 titleWeb Storage示例 /title script type= text/ javascript src=