Recomendados
Mais conteúdo relacionado
Destaque
Semelhante a Storage
Semelhante a Storage (20)
Mais de Tom Fan
Mais de Tom Fan (20)
Storage
- 1. HTML5 开发 Web,MobileWeb & Apps 范圣刚 安博中程在线
- 2. STORAGE
- 3. Cookie的问题和本地存储的需求 安博中程在线 cookie可以用来持久化存储少量的数据，但是它具有一些问题： 我们真正需要的是： · 每一次HTTP Request都会发送cookie信息，会使Web application变慢。 每一次HTTP Request中发送的cookie信息都以未加密方式在网上传输，具有安全性问题。 cookie信息量最大不能超过4KB，对于实用性而言太小了。 · · · · 足够大的存储空间 存储在客户端 在页面刷新的情况下也能将存储的数据持久化 存储的数据不会每次都传输给服务器 · · · · 3/34
- 4. Web Storage Web Storage 可以让Web页面在客户端浏览器中以键值对的形式在本地存储数据。原先是HTML5规范的一部 分，后来被抽离出来形成了单独的一份标准。某些浏览器厂商又把它叫做“本地存储”或者“DOM存储”。 特性检测 也可以使用Modernizr库进行检测 安博中程在线 function supports_html5_webstorage() { return ('localStorage' in window) && window['localStorage'] != null; } JAVASCRIPT if (Modernizr.localStorage) { // window.localStorage 可用！ } else { // 没有本地HTML5存储支持 } JAVASCRIPT 4/34
- 5. 使用 HTML5 存储 HTML5 是基于key/value形式的。存储和检索数据都通过指定的key： 安博中程在线 interfaceStorage{ getteranygetItem(inDOMStringkey); settercreatorvoidsetItem(inDOMStringkey,inanydata); deletervoidremoveItem(inDOMStringkey); voidclear(); readonlyattributeunsignedlonglength; getterDOMStringkey(inunsignedlongindex); } ... localStorage.setItem("username","tom"); vartom=localStorage.getItem("username"); localStorage["age"]=30; varage=localStorage.getItem('age'); JAVASCRIPT 5/34
- 6. storage事件 通过捕获storage事件可以跟踪存储区的改动， 任何时候调用setItem(), removeItem()或者clear()方法时，如果 真的发生了数据改动，都会在window对象上触发storage事件。（只要支持localStorage对象就一定支持 storage事件） handle_storage()回调函数被调用时，会传入一个StorageEvent对象作为参数，IE下面的事件对象存储在 window.event上： 安博中程在线 if (window.addEventListener) { window.addEventListener('storage', handle_storage, false); } else { window.attachEvent('onstorage', handle_storage); } JAVASCRIPT function handle_storage(e) { if (!e) { e = window.event; } } JAVASCRIPT 6/34
- 7. StorageEvent 对象 StorageEvent 对象的属性 属性 类型 描述 key 字符串 加入，修改，或者删除的键名 oldValue 任意 之前的数据（如果是被覆盖的情况）或者null（如果有新数据项加入） newValue 任意 新数据或者null（如果数据项被删除） url 字符串 调用这个触发数据区变动的函数所在的页面地址 storage 事件是无法撤销存储区的改动的。在handle_storage()回调方法中，没有办法停止正在发生的对存储区 的改动。 安博中程在线 7/34
- 9. IndexedDB介绍 什么是IndexedDB？ 安博中程在线 Indexed Database API, 或者简称IndexedDB，是在浏览器中保存结构化数据的一种数据库。为了替代目前已 经被废弃的Web SQL Database API。 IndexedDB的思想是创建一套API，方便保存和读取JavaScript对象，同时还支持查询及搜索。 IndexedDB设计的操作完全是异步进行的。几乎每一次IndexedDB操作，都需要注册onerror或onsuccess事 件处理程序，以确保适当地处理结果。 浏览器前缀，IndexedDB在IE10中叫 msIndexedDB, 在Firefox中叫mozIndexedDB, 在Chrome中叫 webkitIndexedDB。可以在代码前面加上下面这行代码： · · · · var indexedDB = window.indexedDB || window.msIndexedDB || window.mozIndexedDB || window.webkitIndexedDB;JAVASCRIPT 9/34
- 11. 打开数据库的相关事件 打开数据库的代码示例 安博中程在线 var request, database; request = indexedDB.open("admin"); request.onerror = function(event) { alert("打开数据库错误：" + event.target.errorcode); }; request.onsuccess = function(event) { database = event.target.result; } JAVASCRIPT event.target都指向request对象; 如果响应的是onsuccess事件，那么event.target.result中将有一个数据库实例对象(IDBDatabse)； 如果发生了错误，那么event.target.errorCode中将保存一个错误码，表示问题的性质。 · · · 11/34
- 12. 数据库版本号 默认情况下，IndexedDB数据库是没有版本号的。最好一开始就调用setVersion()方法为数据库指定一个版本号 （传入一个表示版本号的字符串）。 安博中程在线 if (database.version != "1.0") { request = database.setVersion("1.0"); request.onerror = function(event) { alert("设置版本号时发生错误：" + event.target.errorCode); }; request.onsuccess = function() { alert("数据库初始化完成，数据库名：" + database.name + ", 版本：" + database.version); }; } else { alert("数据库已经初始化过了。数据库名称：" + database.name + ",版本号：" + database.version); } JAVASCRIPT 12/34
- 13. 创建对象存储空间 建立完数据库连接以后，就要创建对象存储空间。 假设我们要保存用户记录，user对象格式可能类似于： 创建对象存储空间时，必须指定一个全局唯一个键，这里我们可以用"username"。下面是为了保存用户记录而 创建对象存储空间的示例： keyPath属性，就是空间中要保存的对象的一个属性，这个属性将作为存储空间的键来使用。 安博中程在线 var user = { username: "007", firstName: "James". lastName: "Bond", password: "foo" }; JAVASCRIPT var store = database.createObjectStore("users", {keyPath: "username"}); JAVASCRIPT 13/34
- 14. 添加数据 安博中程在线 获得了对象存储空间的引用之后，就可以使用add()或put()方法向其中添加数据。这两个方法都接收一个参 数，即要保存的对象，然后这个对象就会被保存到存储空间中。 这两个方法的区别在于，如果空间中已经包含了键值相同的对象： 也就是说可以把add()理解成插入新值，put()理解成更新原有的值。 比如，我们可以用下面的方法来初始化对象存储空间,把返回的请求对象保存在一个变量中，然后再指定 onerror或onsuccess事件处理程序，来验证请求是否成功完成： · · add()会返回错误； put()则会重写原有对象； · · · //users中保存着一批的用户对象 var i=0, request, requests[], len = users.length; while(i < len) { request = store.add(users[i++]); request.onerror = function() { // 错误处理 }; request.onsuccess = function() { // 成功 }; requests.push(request); } JAVASCRIPT 14/34
- 15. 使用事务 在数据库对象上调用transaction()方法就可以创建事务。任何时候，想要读取或修改数据，都要通过事务来组 织所有的操作。 下面的代码保证只加载users存储空间中的数据，以便通过事务进行访问： 如果要访问多个对象存储空间，可以传入字符串数组： 上面的两个事务都是以只读的方式访问数据。要修改访问方式，必须在创建事务时传入第二个参数。 安博中程在线 var transaction = db.transaction("users"); JAVASCRIPT var transaction = db.transaction(["users", "anotherStore"]); JAVASCRIPT 15/34
- 16. 访问模式 第二个参数表示访问模式，用IDBTransaction接口定义的如下常量表示： IE10+和Firefox4+实现的叫做IDBTransaction, 但在Chrome中则叫webkitIDBTransaction, 所以使用下面的代码 可以统一接口： 有了这行代码就可以比较方便地为transaction()指定第二个参数： 这个事务就可以读写users存储空间了。 安博中程在线 READ_ONLY(0)表示只读； READ_WRITE(1)表示读写； VERSION_CHANGE(2)表示改变 · · · var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction; JAVASCRIPT var transaction = db.transaction("users", IDBTransaction.READ_WRITE); JAVASCRIPT 16/34
- 17. 访问存储空间 拿到事务以后，使用objectStore()方法并传入存储空间的名称，就可以访问特定的存储空间。然后就可以： get()和delete()方法都接收一个对象键作为参数。所有的这5个方法都会返回一个新的请求对象。例如： 安博中程在线 使用add()和put()方法添加数据; 使用get()可以取得值； 使用delete()可以删除对象； 使用clear()可以删除所有对象； · · · · var request = db.transaction("users").objectStore("users").get("007"); request.onerror = function(event) { alert("获取对象失败！"); }; request.onsuccess = function(event) { var result = event.target.result; alert(result.firestName); }; JAVASCRIPT 17/34
- 18. 事务的事件处理函数 一个事务可以完成任何多个请求。 事务本身也有事件处理程序：onerror和oncomplete。这两个事件可以提供事务级的状态信息。 安博中程在线 transaction.onerror = function(event) { // 整个事务都被取消了 }; transaction.oncomplete = fucntion(event) { // 事务成功完成 }; JAVASCRIPT 18/34
- 19. 使用游标查询 安博中程在线 使用事务可以直接通过已知的键来检索单个对象；在需要检索多个对象的情况下，需要在事务内部创建游 标。 游标就是指向结果集的一个指针，游标指针首先会指向结果集中的第一项，在接到查找下一项的指令时，才 会指向下一项。 在对象存储空间上调用openCursor()方法可以创建游标。openCursor()方法返回的也是一个请求对象，也需 要为该对象指定onsuccess和onerror事件处理函数 · · · var store = db.transaction("users").objectStore("users"), request = store.openCursor(); request.onsuccess = function(event) { // 处理成功 }; request.onerror = function(event) { // 处理失败 }; JAVASCRIPT 19/34
- 20. IDBCursor 安博中程在线 在前面的onsuccess事件处理程序执行时，可以通过event.target.result取得存储空间中的下一个对象。 在结果集中有下一项时，result是一个IDBCursor的实例； 如果没有下一项，result为null； IDBCursor实例具有以下几个属性： · · · · key: 对象的键； value：实际的对象； direction：数值，表示游标走动的方向。 primaryKey：游标使用的键，有可能是对象键，也有可能是索引键（后面会讨论索引） - - - 默认是IDBCursor.NEXT(0), 表示下一项。 IDBCursor.NEXT_TO_DUPLICATE(1), 表示下一个不重复的项； IDBCursor.PREV(2)表示前一项； IDBCursor.PREV_NO_DUPLICATE表示前一个不重复的项。 - - - - - 20/34
- 22. 使用游标更新记录 cursor.update() 调用update()方法可以使用指定的对象更新当前游标的value： 安博中程在线 request.onsuccess = function(event) { var cursor = event.target.result, value, updateRequest; if (cursor) { if (cursor.key == "foo") { value = cursor.value; // 取得当前值 value.password = "magic"; // 更新密码 updateRequest = cursor.udpate(value); // 请求保存更新 updateRequest.onsuccess = function() { // 处理成功 }; updateRequest.onerror = function() { // 处理失败 }; } } }; JAVASCRIPT 22/34
- 23. 使用游标删除记录 cursor.delete() 调用delete()方法可以删除相应的记录： 注意：如果当前的事务没有修改对象存储空间的权限，update()和delete()会抛出错误。 安博中程在线 request.onsuccess = function(event) { var cursor = event.target.result, value, deleteRequest; if (cursor) { // 检查一下 if (cursor.key == "foo") { deleteRequest = cursor.delete(); // 请求删除当前项 deleteRequest.onsuccess = function() { // 处理成功 }; deleteRequest.onerror = function() { // 处理失败 }; } } }; JAVASCRIPT 23/34
- 33. 扩展阅读 安博中程在线 MDC: DOM Storage MDC: IndexedDB Beyond HTML5: Database APIs and the Road to IndexedDB · · · 33/34
- 34. <Thank you!> Feel free to contact me if you have any question. 微博 @范圣刚 博客 www.tfan.org github github.com/princetoad