第8章本地存储

第8章本地存储本章工作任务WebStorage本地数据库indexedDB数据库开启软件编程的大门2本章简介本章将介绍HTML5中与本地存储相关的两个重要内容-WebStorage与本地数据库。其中，WebStorage存储机制是对HTML4中cookies存储机制的一个改善。由于cookies存储机制有很多缺点，HTML5不再使用它，转而使用改良后的WebStorage存储机制。本地数据库是HTML5中新增的一个功能，使用它可以在客户端本地建立一个数据库，原本必须要保存在服务器端数据库中的内容现在可以直接保存在客户端本地了，这大大减轻了服务器的负担，同时也加快了访问数据的速度。学习内容：掌握WebStorage的基本概念，了解sessionStorage和locaIStorage，以及两者之间的区别，掌握sessionStorage和locaIStorage的使用方法，能够使用这两者进行复杂数据的存储，能够使用这两者进行JavaScript对象的存储。掌握本地数据库的基本概念，掌握SQLLite本地数据库的基本概念及其使用够使用openDatabase方法创建与打开SQLLite数据库，能够使用transactionin方法进行SQLLite数据库中事务的处理，能够结合使用transaction方法与executeSql方法来实现数据在SQLLite数据库中的增、删、查、改。掌握indexedDB数据库的基本概念及其使用方法，能够在脚本代码中连接indexedDB数据库，掌握indexedDB数据库中对象仓库、索引与事务的基本概念及其分类，能够在版本更新事务中创建对象仓库与索引，能够在只读事务中获取对象仓库中的一条数据或使用游标检索多条数据，能够在读写事务中向对象仓库中追加、修改或删除数据。第3章网络相关配置38.1WebStorage8.1.1Webstorage概述在HTML5中，除了Canvas元素之外，另一个新增的非常重要的功能是可以在客户端地保存数据的WebStorage功能。我们知道，在HTML4中可以使用cookies在客户端保存诸如用户名等简单的用户信息，但通过长期的使用，人们发现用cookies储存永久数据存在以下几个问题。大小：cookies的大小被限制在4KB。带宽：cookies是随HTTP事务一起被发送的，因此会浪费一部分发送cookies时使用的带宽。复杂性：要正确地操纵cookies是很困难的。针对这些问题，在HTML5中，重新提供了一种在客户端本地保存数据的功能，它就是WebStorage功能。顾名思义，WebStorage功能就是在Web上储存数据的功能，这里的储存是针对客户端本地而言的。具体来说，WebStorage又分为两种：sessionStorage将数据保存在session对象中。session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。localStorage将数据保存在客户端本地的硬件设备（通常指硬盘，也可以是其他硬件设备）中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。这两者的区别在于，sessionStorage为临时保存，而localStorage为永久保存。目前为止，Firefox3.6以上版本、Chrome6以上版本、Safari5以上版本、Opera10.50以上版本、IE8以上版本的浏览器支持session-Storage与localStorage的使用。接下来，让我们具体看一下sessionStorage与localStorage的使用示例。首先，需要准备一个用来保存数据的网页。在示例网页中，我们在页面上放置的控件如表8-1所示。开启软件编程的大门4表8-1WebStorage示例的页面中的元素元素ID用途inputtype=textinput输入数据pmsg显示数据button保存数据button保存数据该示例的HTML页面代码如代码清单8-1所示。代码清单8-1WebStorage示例的HTML页面代码!DOCTYPEhtmlheadmetacharset=UTF-8titleWebStorage示例/titlescripttype=text/javascriptsrc=script.js/script/headbodyh1WebStorage示例/h1pid=msg/pinputtype=textid=inputinputtype=buttonvalue=保存数据onclick=saveStorage('input');inputtype=buttonvalue=读取数据onclick=loadStorage('msg');/body/html单击保存数据按钮时调用saveStorage方法来保存数据，单击读取数据按钮时调用loadStorage方法读取数据，这两个方法均位于脚本文件script.js中。接下来，查看脚本文件script.js。在这个脚本文件中，分别使用了sessionStorage方法与loadStorage方法。这两种方法都是用于当用户在input文本框中输入内容后，单击保存数据按钮时保存数据，单击读取数据按钮时读取被保存的数据。但是两种方法对数据的处理方式不一样，在使用sessionStorage方法时，如果关闭了浏览器，这个数据就丢失了，下一次打开浏览器单击读取数据按钮时，读取不到任何数据。而使用locaIStorage方法时，即使浏览器关闭了，下次打开浏览器时仍然能够读取被保存的数据。不过，数据保存是按不同的浏览器分别进行保存的，也就是说，打开别的浏览器是读取不到在先前浏览器中保存的数据的。下面我们来看一下读取数据部分。读写数据时使用的基本方法如下。(1)sessionStorage第3章网络相关配置5保存数据的方法：sessionStorage.setltem(‘key’,‘value’);||或sessionStorage.key=‘value’；读取数据的方法：变量=sessionStorage.getltem(‘key’);||或，变量=sessionStorage.key;(2)locaIStorage保存数据的方法：localStorage.setltem(‘key‘,’value’);||或localStorage.key=’value’;读取数据的方法：变量=localStorage.getltem(’key’);||或变量=locaIStorage.key;若使用sessionStorage读取或保存数据，则使用sessionStorage对象并调用该对象d的读写方法；若使用localStorage读取或保存数据，则使用localStoraggetltem调用该对象的读写方法。在进行读写时，不管是哪个对象，都可以通过该对象的getItem方法来读取数据，也可以通过该对象的自定义属性值来读取数据；可以通过该对象的setltem方法来保存数据通过该对象的自定义属性值来保存数据。保存数据时按“键名／键值”的形式进行保存。当通过该对象的getltem方法读取数据时，将参数指定为键名，该方法返回键值，当通过该对象的自定义属性值来读取数据时，可以将该对象的某个自定义属性名作为键名，访问该自定义属性的属性值即可得到键值；当通过该对象的setltem方法保存数据时，将第一个参数指定为键名，将第二个参数指定为键值；当通过该对象的自定义属性值来保存数据时，可以将该对象的某个自定义属性名作为键名，然后直接将该自定义属性值设置为键值。在保存数据时不允许重复保存相同的键名。保存后可以修改键值，但不允许修改键名（只能重新取键名，然后再保存键值）。script.js脚本文件中的内容如代码清单8-2所示。代码清单8-2WebStorage示例的JavaScript脚本代码//sessionStorage示例functionsaveStorage(id){开启软件编程的大门6vartarget=document.getElementByld(id),varstr=target.value;sessionStorage.setitem(message,str);//或sessionStorage.message=str;}functionloadStorage(id){vartarget=document.getElementByld(id);varmsg=sessionStorage.getltem(message),//或varmsg=sessionStorage.message;target.innerHTML=msg;//localStorage示例functionsaveStorage(id){vartarget=document.getElementByld(id);varstr=target.value,localStorage.setltem(message,str);//或localStorage.message=str;}functionloadStorage(id){vartarget=document.getElementByld(id);varmsg=localStorage.getltem(message);//或varmsg=localStorage.message,target.innerHTML=msg;}这段程序在浏览器中的运行结果如图8-1所示。图8-1浏览器中的WebStorage示例第3章网络相关配置78.1.2简单Web留言本8.1.1节讲到的使用getltem方法、sessionStorage对象或locaIStorage对象的自定义属性值读取数据，使用setltem方法、sessionStorage对象或locaIStorage对象的自定义属性值保存数据，虽然这种一对一的数据读写方法使用起来比较方便，但是在实际使用过程中用处并不是很大，因为如果要保存的数据量比较大，那么使用这种方法会非常麻烦。下面来看一下如何利用Storage来保存和读取大量数据。这里来看一个简单Web留言本的示例。使用一个多行文本框来输入数据，单击按钮时将文本框中的数据保存到locaIStorage中，在表单下部放置_个p元素来显示保存后的数据。只保存文本框中的内容，并不能知道该内容是什么时候写好的，所以在保存该内容的同时，保存当前日期和时间，并将该日期和时间一并显示在p元素中。在利用WebStorage保存数据时，数据必须是“键名／键值”这个格式，所以将文本框的内容作为键值，保存时的日期和时间作为键名来进行保存，计算机中的日期和时间值是以时间戳（1970年1月1日凌晨12点后经过的秒数）的形式进行管理的，所以保存时不可能存在重复的键名。该示例的显示页面所用的HTML代码如代码清单8-3所示。在该页面中，除了输入数据用的文本框与显示数据用的p元素之外，还放置了追加按钮与初始化按钮，单击追加按钮来保存数据，单击初始化按钮来消除全部数据。代码清单8-3简单Web留言本的HTML代码!DOCTYPEhtmlheadmetacharset=UTF-8title简单Web留言本/titlescripttype=text/javascriptsrc=script.js/script/headbodyhl简单Web留言本/hltextareaid=memocols=60rows=10/textareabrinputtype=buttonvalue=追加onclick=saveStorage('memo');inputtype=buttonvalue=初始化onclick=clearStorage('msg'),hr