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

1、HTML5+CSS3网页设计基础教程第7章 本地存储第1页第第7章章 本地存储本地存储本章概述 本章的学习目标主要内容HTML5+CSS3网页设计基础教程第7章 本地存储第2页本章概述本章概述lHTML5为客户端存储数据提出了理想的解决方案：为客户端存储数据提出了理想的解决方案：如果存储复杂的数据，可以使用如果存储复杂的数据，可以使用Web Database，该方法可以像客户端程序一样使用该方法可以像客户端程序一样使用SQL语句对数语句对数据库进行操作；如果只是存储简单的据库进行操作；如果只是存储简单的Key/Value键值对，可以使用键值对，可以使用Web存储。本章将从个方便介存储。本章将从

2、个方便介绍绍Web存储和存储和Web Database的使用。的使用。HTML5+CSS3网页设计基础教程第7章 本地存储第3页本章的学习目标本章的学习目标l理解理解Cookie存储机制的优缺点，从而了解为什么存储机制的优缺点，从而了解为什么要用要用Web存储；存储；l掌握使用掌握使用Web存储的方法，如检查浏览器的兼容存储的方法，如检查浏览器的兼容性、设置和获取数据、放置数据泄露、性、设置和获取数据、放置数据泄露、Web存储存储事件监测等；事件监测等；l掌握本地数据库的使用，包括本地数据库的基本掌握本地数据库的使用，包括本地数据库的基本概念、执行查询等概念、执行查询等；l掌握掌握indexe

3、dDB数据库的使用，包括数据库连接、数据库的使用，包括数据库连接、数据库版本更新、创建对象仓库、创建索引、使数据库版本更新、创建对象仓库、创建索引、使用事务、保存数据、获取数据、检索数据、统计用事务、保存数据、获取数据、检索数据、统计操作等。操作等。HTML5+CSS3网页设计基础教程第7章 本地存储第4页主要内容主要内容7.1 Web存储存储 7.2 使用使用Web存储存储 7.3 本地数据库本地数据库7.4 本章小结本章小结 HTML5+CSS3网页设计基础教程第7章 本地存储第5页7.1 Web存储存储 l7.1.1 Cookie存储机制的优缺点存储机制的优缺点l7.1.2 为什么要用为

4、什么要用Web存储存储l7.1.3 Web存储的优缺点存储的优缺点HTML5+CSS3网页设计基础教程第7章 本地存储第6页7.1.1 Cookie存储机制的优缺点存储机制的优缺点l使用使用Cookie存储信息的优点有：简单易用，浏览器负责存储信息的优点有：简单易用，浏览器负责发送数据，且自动管理不同站点的发送数据，且自动管理不同站点的Cookie。l使用使用Cookie保存信息的缺点有：安全性差，存储容量只保存信息的缺点有：安全性差，存储容量只有有4KB，且存储的键值对数量有限；用户可以将浏览器设，且存储的键值对数量有限；用户可以将浏览器设置为禁用置为禁用Cookie；另外，由于；另外，由于

5、Cookie由请求来传递，因由请求来传递，因此传递大量数据时，效率显得极低下。此传递大量数据时，效率显得极低下。HTML5+CSS3网页设计基础教程第7章 本地存储第7页7.1.2 为什么要用为什么要用Web存储存储lWeb Storage存储机制比传统的存储机制比传统的Cookie更加强大，弥补更加强大，弥补了了Cookie的许多缺点，主要在两方面做了加强：第一，的许多缺点，主要在两方面做了加强：第一，Web Storage提供了简单易用的提供了简单易用的API接口，只需设置键值接口，只需设置键值即可；第二，在存储容量方面可以根据用户分配的磁盘配即可；第二，在存储容量方面可以根据用户分配的磁

6、盘配额进行存储，能够在每个用户域存储额进行存储，能够在每个用户域存储5MB10MB的内容，的内容，用户不仅可以存储用户不仅可以存储session，还可以存储许多信息，如设，还可以存储许多信息，如设置偏好、本地化的数据和离线数据等。置偏好、本地化的数据和离线数据等。Web Storage还提还提供了使用供了使用JavaScript编程的接口，开发者可以使用编程的接口，开发者可以使用JavaScript客户端脚本实现许多以前只能在服务器端才能客户端脚本实现许多以前只能在服务器端才能完成的工作。完成的工作。HTML5+CSS3网页设计基础教程第7章 本地存储第8页7.1.3 Web存储的优缺点存储的

7、优缺点lWeb存储的优点有以下几点：存储的优点有以下几点：存储空间更大：存储空间更大：IE8下每个独立的存储空间为下每个独立的存储空间为10M，其他浏览器实，其他浏览器实现略有不同，但都比现略有不同，但都比Cookie要大很多。要大很多。存储内容不会发送到服务器：当设置了存储内容不会发送到服务器：当设置了Cookie后，后，Cookie的内的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与中的数据则仅仅是存在本地，不会与服务器发生任何交互。服务器发生任

8、何交互。更多丰富易用的接口：更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，提供了一套更为丰富的接口，使得数据操作更为简便。使得数据操作更为简便。独立的存储空间：每个域（包括子域）有独立的存储空间，各个独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。存储空间是完全独立的，因此不会造成数据混乱。lWeb存储的不足之处在于：浏览器为每个与分配独立的存存储的不足之处在于：浏览器为每个与分配独立的存储空间，不同域的存储空间不能交叉访问，但是在域储空间，不同域的存储空间不能交叉访问，但是在域B中中嵌入域嵌入域A的脚本依然可以访问域的

9、脚本依然可以访问域B中的数据；存储在本地中的数据；存储在本地的数据未加密，容易造成隐私泄露。的数据未加密，容易造成隐私泄露。HTML5+CSS3网页设计基础教程第7章 本地存储第9页主要内容主要内容7.1 Web存储存储 7.2 使用使用Web存储存储 7.3 本地数据库本地数据库7.4 本章小结本章小结 HTML5+CSS3网页设计基础教程第7章 本地存储第10页7.2 使用使用Web存储存储 l7.2.1 检查浏览器的支持性检查浏览器的支持性l7.2.2 设置和获取数据设置和获取数据l7.2.3 Web存储的其他操作存储的其他操作l7.2.4 Web存储事件监测存储事件监测l7.2.5 制

10、作简单的网页皮肤制作简单的网页皮肤l7.2.6 网站人气值和在线人数统计网站人气值和在线人数统计HTML5+CSS3网页设计基础教程第7章 本地存储第11页7.2.1 检查浏览器的支持性检查浏览器的支持性l检查浏览器对检查浏览器对Web存储的支持性。存储的支持性。if(typeof(Storage)=undefined)document.write(您的浏览器不支持您的浏览器不支持Web存储存储);else document.write(您的浏览器可以使用您的浏览器可以使用Web存储存储);HTML5+CSS3网页设计基础教程第7章 本地存储第12页7.2.2 设置和获取数据设置和获取数据l设

11、置数据的语法格式如下：设置数据的语法格式如下：window.sessionStorage.setItem(myFirstKey,myFirstValue);l获取数据的语法格式如下：获取数据的语法格式如下：alert(window.sessionStorage.getItem(myFirstKey);HTML5+CSS3网页设计基础教程第7章 本地存储第13页7.2.3 Web存储的其他操作存储的其他操作l获取对象的长度：使用获取对象的长度：使用length属性获取目前属性获取目前Storage对象对象中存储的键值对的数量。注意的是，中存储的键值对的数量。注意的是，Storage对象是同源对象

12、是同源的，因此的，因此Storage对象的长度只反映同源情况下的长度。对象的长度只反映同源情况下的长度。l获取指定位置的键：通过获取指定位置的键：通过key(index)方法获取一个指定位方法获取一个指定位置的键。置的键。l删除数据项：通过删除数据项：通过removeItem(key)删除数据项。如果数删除数据项。如果数据存储在键参数下，则调用此函数会将相应的数据项删除。据存储在键参数下，则调用此函数会将相应的数据项删除。如果键参数没有对应数据，则不会执行任何操作。如果键参数没有对应数据，则不会执行任何操作。l清除所有数据：通过清除所有数据：通过clear()函数删除存储列表中的所有数函数删除

13、存储列表中的所有数据。据。HTML5+CSS3网页设计基础教程第7章 本地存储第14页7.2.4 Web存储事件监测存储事件监测l在在HTML5中，可以通过中，可以通过window对象的对象的storage事件进行事件进行监听并指定其事件处理函数的方法来定义当其在其他页面监听并指定其事件处理函数的方法来定义当其在其他页面中修改中修改sessionStorage或或localStorage中的值时所要执中的值时所要执行的处理，代码如下：行的处理，代码如下：window.addEventListener(storage,function()/当当sessionStorage或或localStora

14、ge中的值发生变动时所要中的值发生变动时所要执行的处理执行的处理 ,false);HTML5+CSS3网页设计基础教程第7章 本地存储第15页7.2.5 制作简单的网页皮肤制作简单的网页皮肤l在访问网站的时候，可以经常看到，一些网站允许用户选在访问网站的时候，可以经常看到，一些网站允许用户选择自己喜欢的主题风格，当再次登录的时候，网站将为该择自己喜欢的主题风格，当再次登录的时候，网站将为该用户显示上次设置的主题风格，这样的主题风格被称为用户显示上次设置的主题风格，这样的主题风格被称为“皮肤皮肤”。在网页设计中，一般用。在网页设计中，一般用JavaScript动态设计网动态设计网页皮肤。页皮肤。

15、l对于皮肤配置数据，就可以使用对于皮肤配置数据，就可以使用localStorage存储。这样，存储。这样，当用户再次登录访问的时候，程序将自动调用当用户再次登录访问的时候，程序将自动调用localStorage数据来设置恢复页面样式。数据来设置恢复页面样式。l【7-3】制作简单的网页皮肤。制作简单的网页皮肤。HTML5+CSS3网页设计基础教程第7章 本地存储第16页7.2.6 网站人气值和在线人数统网站人气值和在线人数统计计l网站显示着人气值或当前在线人数。其实实现原理大多是网站显示着人气值或当前在线人数。其实实现原理大多是基于会话的统计。使用基于会话的统计。使用sessionStorage

16、就可以作为会话就可以作为会话计数器，计数器，localStorage则可以作为则可以作为Web应用访问计数器。应用访问计数器。声明一个声明一个localStorage计数变量，当刷新页面时，会看到计数变量，当刷新页面时，会看到计数器数值在增加。关闭浏览器窗口，然后重新打开，计计数器数值在增加。关闭浏览器窗口，然后重新打开，计数器还会在原来的基础上继续增加。而数器还会在原来的基础上继续增加。而sessionStorage计数变量只能够在当前会话期间显示页面的访问量，刷新计数变量只能够在当前会话期间显示页面的访问量，刷新页面会看到计数器在增长，当关闭浏览器时，然后再重新页面会看到计数器在增长，当关

17、闭浏览器时，然后再重新打开，计数器将被清除。打开，计数器将被清除。l【例例7-4】网站人气值和在线人数统计。网站人气值和在线人数统计。HTML5+CSS3网页设计基础教程第7章 本地存储第17页主要内容主要内容7.1 Web存储存储 7.2 使用使用Web存储存储 7.3 本地数据库本地数据库7.4 本章小结本章小结 HTML5+CSS3网页设计基础教程第7章 本地存储第18页7.3 本地数据库本地数据库l7.3.1 本地数据库的基本概念本地数据库的基本概念l7.3.2 用用executeSql来执行查询来执行查询l7.3.3 创建一个简单的数据库创建一个简单的数据库l7.3.4 综合应用综合

18、应用点评功能点评功能HTML5+CSS3网页设计基础教程第7章 本地存储第19页7.3.1 本地数据库的基本概念本地数据库的基本概念l在在HTML5中，可以向访问本地文件那样轻松对内置数据中，可以向访问本地文件那样轻松对内置数据库进行直接访问。库进行直接访问。HTML5中内置了两种本地数据库，一中内置了两种本地数据库，一种是本节介绍的种是本节介绍的SQLLite，可以通过，可以通过SQL语言来访问的文语言来访问的文件型件型SQL数据库，另一种是被称为数据库，另一种是被称为indexedDB的的NoSQL类型的数据库。本书限于篇幅，仅对第一种数据库进行介类型的数据库。本书限于篇幅，仅对第一种数据

19、库进行介绍。对绍。对NoSQL感兴趣的读者可以阅读其他相关资料。感兴趣的读者可以阅读其他相关资料。l要在要在JavaScript脚本中使用脚本中使用SQLLite数据库，有两个必要数据库，有两个必要步骤：步骤：（1）创建和访问数据库对象。）创建和访问数据库对象。（2）使用事务对数据库进行操作。）使用事务对数据库进行操作。HTML5+CSS3网页设计基础教程第7章 本地存储第20页7.3.2 用用executeSql来执行查询来执行查询l在在transaction的回调函数内如何访问数据库。这的回调函数内如何访问数据库。这里使用了作为参数传递给回调函数的里使用了作为参数传递给回调函数的trans

20、action对象的对象的executeSql方法，使用格式如下：方法，使用格式如下：transaction.executeSql(sqlquery,dataHandler,errorHandler);HTML5+CSS3网页设计基础教程第7章 本地存储第21页7.3.3 创建一个简单的数据库创建一个简单的数据库var db=openDatabase(db,1.0,TestDB,2*1024*1024);var msg;db.transaction(function(tx)tx.executeSql(CREATE TABLE IF NOT EXISTS logs(id unique,log);t

21、x.executeSql(INSERT INTO logs(id,log)VALUES(1,foobar);tx.executeSql(INSERT INTO logs(id,log)VALUES(2,logmsg);msg=完成消息创建和插入行操作。完成消息创建和插入行操作。;document.querySelector(#status).innerHTML=msg;);db.transaction(function(tx)tx.executeSql(SELECT*FROM logs,function(tx,results)var len=results.rows.length,i;msg=

22、查询行数：查询行数：+len+;document.querySelector(#status).innerHTML+=msg;for(i=0;ilen;i+)msg=+results.rows.item(i).log+;document.querySelector(#status).innerHTML+=msg;,null););HTML5+CSS3网页设计基础教程第7章 本地存储第22页7.3.4 综合应用综合应用点评功能点评功能l详见详见【例例7-8】简单点评功能。简单点评功能。HTML5+CSS3网页设计基础教程第7章 本地存储第23页主要内容主要内容7.1 Web存储存储 7.2 使用

23、使用Web存储存储 7.3 本地数据库本地数据库7.4 本章小结本章小结 HTML5+CSS3网页设计基础教程第7章 本地存储第24页7.4 本章小结本章小结 l大数据和智能科学的爆发，大数据和智能科学的爆发，Web技术的发展，使技术的发展，使得人们在考虑安全性的基础上，为客户端提供了得人们在考虑安全性的基础上，为客户端提供了多种有效的存储技术。本章介绍了多种有效的存储技术。本章介绍了HTML5提出的提出的理想解决方案：如果存储复杂的数据，可以使用理想解决方案：如果存储复杂的数据，可以使用Web Database，该方法可以像客户端程序一样，该方法可以像客户端程序一样使用使用SQL语句对数据库进行操作；如果只是存储语句对数据库进行操作；如果只是存储简单的简单的Key/Value键值对，可以使用键值对，可以使用Web存储。存储。