本地存储PPT演示课件

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