(HTML5程序设计及实践)第7章HTML5Web存储.ppt

谢 谢 Thanks for listening. 第7章 HTML5 Web存储 目录 Web存储 Web SQL Database 索引数据库 认识Web存储 两种Web存储方式 会话存储（Session Storage）：它的访问性上只限于当前页面，并且页面关闭后会消失，通过sessionStorage进行访问。 本地存储（Local Storage）：没有时间限制的数据存储，通过localStorage进行访问。 Web Storage和Cookie的异同 网络传输：Cookie会随着请求发送到服务器端，而Web Storage数据存在客户端，不会与服务器发交互。 存储限制：Cookie存储的数据大小限制为4KB，而Web Storage能够提供更大容量的存储设计，根据浏览器不同，可以存储5MB左右的数据。 数据接口：Web Storage提供丰富的数据接口，开发人员可以方便的访问数据，而Cookie则需要开发人员自行开发接口。 存储空间：Web Storage每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。 Web存储API 函数名 功能 length 存储的键/值对的数量 key(n) 返回存储的第N个键。 getItem(key) 返回键key对应的值。如果值不存在，则返回空null。注意，返回的值是一个字符串。如果你存储的值是整数或布尔型，你需要类型转换。 setItem(key, value) 把值插入到key键中 removeItem(key) 移除某个键对应的值（包含键本身）。如果键不存在，此方法什么也不做。 clear 清空存储的键/值数据 Web SQL Database Web SQL Database允许应用程序通过一个异步JavaScript接口访问SQLLite数据库，HTML5的Web SQL Database API有三个核心的方法 函数 功能 openDatabase() 打开数据库或者创建新的数据库 transaction() 控制事务的提交和回滚 executeSql() 执行SQL语句 Web SQL Database 打开数据库：使用openDatabase（）方法打开数据库，如果该数据库不存在，则创建新的数据库。该方法包含五个参数：数据库名、版本号、描述、数据库大小、回调函数，其中回调函数可以省略。 通过事务执行SQL：transaction()方法接收一个方法作为参数，在该方法中执行SQL脚本 var db = openDatabase(student, 1.0,’Student Info, 5 * 1024); var db = openDatabase(student, 1.0,Student Info, 5 * 1024); db.transaction(function(tx){ tx.executeSql(CREATE TABLE studentinfo (id INTEGER , name TEXT)); tx.executeSql(INSERT INTO studentinfo(id, name) Values(1, zhangsan)); }); 索引数据库 Web SQL Database已被较新的规范——索引数据库所取代，目前浏览器正在逐步实现对索引数据库的支持。索引数据库以window.indexDB作为入口，但各个浏览器增加了前缀，获取方式一般采用。 采用command-request-result的调用方式，比如打开数据库，返回一个request，在request的result中得到返回的数据库引用。 var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB; 索引数据库 打开数据库 onupgradeneeded这个回调函数：当数据库发生改变时调用。比如，当某个数据库不存在需要创建，或者数据库更改时。一般在该回调函数内创建objectStore，相当于数据库中的一张表。 var peopleData = [ { name: John Dow, email: john@ }, { name: Don Dow, email: don@ } ]; var db; var request = indexedDB.open(PeopleDB, 1); request.onsuccess = function (evt) {