HTML5+CSS3网页设计基础教程第7章 本地存储

HTML5+CSS3网页设计基础教程第7章本地存储第1页第7章本地存储本章概述本章的学习目标主要内容HTML5+CSS3网页设计基础教程第7章本地存储第2页本章概述HTML5为客户端存储数据提出了理想的解决方案：如果存储复杂的数据，可以使用WebDatabase，该方法可以像客户端程序一样使用SQL语句对数据库进行操作；如果只是存储简单的Key/Value键值对，可以使用Web存储。本章将从个方便介绍Web存储和WebDatabase的使用。HTML5+CSS3网页设计基础教程第7章本地存储第3页本章的学习目标理解Cookie存储机制的优缺点，从而了解为什么要用Web存储；掌握使用Web存储的方法，如检查浏览器的兼容性、设置和获取数据、放置数据泄露、Web存储事件监测等；掌握本地数据库的使用，包括本地数据库的基本概念、执行查询等；掌握indexedDB数据库的使用，包括数据库连接、数据库版本更新、创建对象仓库、创建索引、使用事务、保存数据、获取数据、检索数据、统计操作等。HTML5+CSS3网页设计基础教程第7章本地存储第4页主要内容7.1Web存储7.2使用Web存储7.3本地数据库7.4本章小结HTML5+CSS3网页设计基础教程第7章本地存储第5页7.1Web存储7.1.1Cookie存储机制的优缺点7.1.2为什么要用Web存储7.1.3Web存储的优缺点HTML5+CSS3网页设计基础教程第7章本地存储第6页7.1.1Cookie存储机制的优缺点使用Cookie存储信息的优点有：简单易用，浏览器负责发送数据，且自动管理不同站点的Cookie。使用Cookie保存信息的缺点有：安全性差，存储容量只有4KB，且存储的键值对数量有限；用户可以将浏览器设置为禁用Cookie；另外，由于Cookie由请求来传递，因此传递大量数据时，效率显得极低下。HTML5+CSS3网页设计基础教程第7章本地存储第7页7.1.2为什么要用Web存储WebStorage存储机制比传统的Cookie更加强大，弥补了Cookie的许多缺点，主要在两方面做了加强：第一，WebStorage提供了简单易用的API接口，只需设置键值即可；第二，在存储容量方面可以根据用户分配的磁盘配额进行存储，能够在每个用户域存储5MB~10MB的内容，用户不仅可以存储session，还可以存储许多信息，如设置偏好、本地化的数据和离线数据等。WebStorage还提供了使用JavaScript编程的接口，开发者可以使用JavaScript客户端脚本实现许多以前只能在服务器端才能完成的工作。HTML5+CSS3网页设计基础教程第7章本地存储第8页7.1.3Web存储的优缺点Web存储的优点有以下几点：►存储空间更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。►存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而WebStorage中的数据则仅仅是存在本地，不会与服务器发生任何交互。►更多丰富易用的接口：WebStorage提供了一套更为丰富的接口，使得数据操作更为简便。►独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。Web存储的不足之处在于：浏览器为每个与分配独立的存储空间，不同域的存储空间不能交叉访问，但是在域B中嵌入域A的脚本依然可以访问域B中的数据；存储在本地的数据未加密，容易造成隐私泄露。HTML5+CSS3网页设计基础教程第7章本地存储第9页主要内容7.1Web存储7.2使用Web存储7.3本地数据库7.4本章小结HTML5+CSS3网页设计基础教程第7章本地存储第10页7.2使用Web存储7.2.1检查浏览器的支持性7.2.2设置和获取数据7.2.3Web存储的其他操作7.2.4Web存储事件监测7.2.5制作简单的网页皮肤7.2.6网站人气值和在线人数统计HTML5+CSS3网页设计基础教程第7章本地存储第11页7.2.1检查浏览器的支持性检查浏览器对Web存储的支持性。scriptif(typeof(Storage)==undefined){document.write(您的浏览器不支持Web存储);}else{document.write(您的浏览器可以使用Web存储);}/scriptHTML5+CSS3网页设计基础教程第7章本地存储第12页7.2.2设置和获取数据设置数据的语法格式如下：window.sessionStorage.setItem('myFirstKey','myFirstValue');获取数据的语法格式如下：alert(window.sessionStorage.getItem('myFirstKey');HTML5+CSS3网页设计基础教程第7章本地存储第13页7.2.3Web存储的其他操作获取对象的长度：使用length属性获取目前Storage对象中存储的键值对的数量。注意的是，Storage对象是同源的，因此Storage对象的长度只反映同源情况下的长度。获取指定位置的键：通过key(index)方法获取一个指定位置的键。删除数据项：通过removeItem(key)删除数据项。如果数据存储在键参数下，则调用此函数会将相应的数据项删除。如果键参数没有对应数据，则不会执行任何操作。清除所有数据：通过clear()函数删除存储列表中的所有数据。HTML5+CSS3网页设计基础教程第7章本地存储第14页7.2.4Web存储事件监测在HTML5中，可以通过window对象的storage事件进行监听并指定其事件处理函数的方法来定义当其在其他页面中修改sessionStorage或localStorage中的值时所要执行的处理，代码如下：window.addEventListener('storage',function(){//当sessionStorage或localStorage中的值发生变动时所要执行的处理},false);HTML5+CSS3网页设计基础教程第7章本地存储第15页7.2.5制作简单的网页皮肤在访问网站的时候，可以经常看到，一些网站允许用户选择自己喜欢的主题风格，当再次登录的时候，网站将为该用户显示上次设置的主题风格，这样的主题风格被称为“皮肤”。在网页设计中，一般用JavaScript动态设计网页皮肤。对于皮肤配置数据，就可以使用localStorage存储。这样，当用户再次登录访问的时候，程序将自动调用localStorage数据来设置恢复页面样式。【7-3】制作简单的网页皮肤。HTML5+CSS3网页设计基础教程第7章本地存储第16页7.2.6网站人气值和在线人数统计网站显示着人气值或当前在线人数。其实实现原理大多是基于会话的统计。使用sessionStorage就可以作为会话计数器，localStorage则可以作为Web应用访问计数器。声明一个localStorage计数变量，当刷新页面时，会看到计数器数值在增加。关闭浏览器窗口，然后重新打开，计数器还会在原来的基础上继续增加。而sessionStorage计数变量只能够在当前会话期间显示页面的访问量，刷新页面会看到计数器在增长，当关闭浏览器时，然后再重新打开，计数器将被清除。【例7-4】网站人气值和在线人数统计。HTML5+CSS3网页设计基础教程第7章本地存储第17页主要内容7.1Web存储7.2使用Web存储7.3本地数据库7.4本章小结HTML5+CSS3网页设计基础教程第7章本地存储第18页7.3本地数据库7.3.1本地数据库的基本概念7.3.2用executeSql来执行查询7.3.3创建一个简单的数据库7.3.4综合应用——点评功能HTML5+CSS3网页设计基础教程第7章本地存储第19页7.3.1本地数据库的基本概念在HTML5中，可以向访问本地文件那样轻松对内置数据库进行直接访问。HTML5中内置了两种本地数据库，一种是本节介绍的SQLLite，可以通过SQL语言来访问的文件型SQL数据库，另一种是被称为indexedDB的NoSQL类型的数据库。本书限于篇幅，仅对第一种数据库进行介绍。对NoSQL感兴趣的读者可以阅读其他相关资料。要在JavaScript脚本中使用SQLLite数据库，有两个必要步骤：►（1）创建和访问数据库对象。►（2）使用事务对数据库进行操作。HTML5+CSS3网页设计基础教程第7章本地存储第20页7.3.2用executeSql来执行查询在transaction的回调函数内如何访问数据库。这里使用了作为参数传递给回调函数的transaction对象的executeSql方法，使用格式如下：transaction.executeSql(sqlquery,[],dataHandler,errorHandler);HTML5+CSS3网页设计基础教程第7章本地存储第21页7.3.3创建一个简单的数据库scripttype=text/javascriptvardb=openDatabase('db','1.0','TestDB',2*1024*1024);varmsg;db.transaction(function(tx){tx.executeSql('CREATETABLEIFNOTEXISTSlogs(idunique,log)');tx.executeSql('INSERTINTOlogs(id,log)VALUES(1,foobar)');tx.executeSql('INSERTINTOlogs(id,log)VALUES(2,logmsg)');msg='p完成消息创建和插入行操作。/p';document.querySelector('#status').innerHTML=msg;});db.transaction(function(tx){tx.executeSql('SELECT*FROMlogs',[],function(tx,results){varlen=results.rows.length,i;msg=p查询行数：+len+/p;document.querySelector('#status').innerHTML+=msg;for(i=0;ilen;i++){msg=pb+results.rows.item(i).log+/b/p;document.querySelector('#status').innerHTML+=msg;}},null);});/scriptHTML5+CSS3网页设计基础教程第7章本地存储第22页7.3.4综合应用——点评功能详见【例7-8】简单点评功能。HTML5+CSS3网页设计基础教程第7章本地存储第23页主要内容7.1Web存储7.2使用Web存储7.3本地数据库7.4本章小结HTML5+CSS3网页设计基础教程第7章本地存储第24页7.4本章小结大数据和智能科学的爆发，Web技术的发展，使得人们在考虑安全性的基础上，为客户端提供了多种有效的存储技术。本章介绍了HTML5提出的理想解决方案：如果存储复杂的数据，可以使用WebDatabase，该方法可以像客户端程序一样使用SQL语句对数据库进行操作；如果只是存储简单的Key/Value键值对，可以使用Web存储。