第8篇 本地存储.ppt

最好加上判断语句 if(!window.indexedDB) { window.alert(“赶快升级您的老古董浏览器!”); } var dbRequest = indexedDB.open(dbName, dbVersion); dbRequest.onsuccess = function(event){//连接成功 //event.target.result为一个IDBDatabase对象，代表连接成功的数据库对象 idb = event.target.result; // idb=dbRequest.result; 与上一行代码等价,event.targe=dbRequest alert(数据库连接成功); }; dbRequest.onerror = function(){ alert(数据库连接失败); }; 8.3.4 创建对象仓库 IDBDatabase.createObjectStore()方法创建对象仓库 代码清单8-13 8.3.5 创建索引 indexedDB数据库中的索引类似于关系数据库中的索引 需要通过对象属性来创建 创建索引后可以提高检索性能 objectstore.createIndex(name,keyPath,optionalParameters); 代码清单8-14 8.3.6 索引的multiEntry属性值 在indexedDB数据库中，索引具有一个multiEntry属性 如果数据记录的索引属性值为一个数组 可以将该数组中的每一个元素添加在索引中 假设有一个由博客总的某篇文章组成的记录对象，该对象的各属性值如下 { id: 12345, title:’文章标题’, body:’文章正文’, tags:[‘HTML’,’JavaScript’,’PHP’] } 如果tags创建为一个索引 如果multiEntry=true, 那么，无论输入HTML,还是JavaScript,还是PHP,都能检索到这条记录 如果multiEnry=false,则必须输入[‘HTML’,’JavaScript’,’PHP’]才能检索到这条记录 8.3.7使用事务 在数据库连接成功后，可以使用如下方法开启只读事务 与 读写事务 var storeName=[‘users’]; var mode=‘readonly’; var mode2=‘readwrite’; var tx=idb.transation(storeNames,mode); 8.3.8 删除数据仓库 indexedDB.deleteDatabase(dbName) 8.3.8 保存数据 代码清单8-15 8.3.9获取数据 代码清单8-16 8.3.10根据主键值检索数据 代码清单8-17 8.3.11 根据索引属性值检索数据 代码清单8-18 8.3.12 复合索引 代码清单8-19 8.3.13 统计对象仓库中的数据数量 代码清单8-20 8.3.14 使用indexedDB API制作Web留言本 代码清单8-21 代码清单8-22 var values=[ {userId: 1, userName: “用户D”, address: “住址1”}, {userId: 2, userName: “用户C”, address: “住址2”}, {userId: 3, userName: “用户B”, address: “住址3”}, {userId: 4, userName: “用户A”, address: “住址4”} ]; for(var i=0;ivalues.length;i++) store.put(values[i]); 代码清单8-18可以写成如下: * shu2c@163.com 第8章 本地存储 本章介绍HTML 5中与本地存储相关的两个策要内容——Web Storage与本地数据库 Web Storage存储机制是对HTML 4中cookies存储机制的一个改善 HTML 5中不再使用cookies，转而使用改良后的Web Storage存储机制 本地数据库 是HTML 5中新增的一个功能 cookies储存永久数 据存在以下几个问题： □大小：cookies的大小被限制在4KB。 ., □带宽：cookies是随HTTP事务一起被发送的，因此会浪费一部分发送cookies时使用的 带宽。 □复杂性：要正确地操纵cookies是很困难的。 在这种情况下，在HTML 5中重新提供了一种在客户端本地保存数据的功能，它就是 Web Storage功能。 Web S