您现在的位置是：网站首页> 编程资料编程资料

html5 初试 indexedDB(推荐)html5中localStorage本地存储的简单使用HTML5 LocalStorage 本地存储刷新值还在详解HTML5 LocalStorage 本地存储 html5本地存储 localStorage操作使用详解Html5 web本地存储实例详解HTML5本地存储之Web Storage详解HTML5中indexedDB 数据库的使用实例深入解析HTML5的IndexedDB索引数据库HTML5本地存储之IndexedDB

2023-10-13 416人已围观

简介 下面小编就为大家带来一篇html5 初试 indexedDB(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦

indexedDB是存储大量结构化数据的API，demo中用到的是异步API，麻烦的就是所有对indexedDB的操作都会发生一个异步的‘请求’，只要熟悉了API操作起来也很简单。

大体流程是这样

1.打开数据库

JavaScript Code复制内容到剪贴板
  1. var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;   
  2.   
  3. if ('webkitIndexedDB' in window) {   
  4.     window.IDBTransaction = window.webkitIDBTransaction;   
  5.     window.IDBKeyRange = window.webkitIDBKeyRange;   
  6. }   
  7. //这个就不解释了   
  8.   
  9. var request = indexedDB.open("adsageIDB");  //open  ： indexedDB只有这一个方法  打开（数据库名）   
  10. request.onsuccess = function(e) { //异步   
  11.     var v = "1.00";   
  12.     var db = e.target.result;   
  13.   
  14.     if (v!= db.version) {   
  15.         var setVrequest = db.setVersion(v);   
  16.         setVrequest.onsuccess = function(e) { //异步   
  17.             if(db.objectStoreNames.contains("todo")) {   
  18.                 db.deleteObjectStore("todo");   
  19.             }   
  20.             var store = db.createObjectStore("todo", {keyPath: "adsid"});//onsuccess 后创建ObjectStore  暂时用到两个参数，数据库&&主键   
  21.         }   
  22.     }       
  23. }  

这样就 创建/连接 了一个数据库

2.创建交互对象 && 监听dom事件 && 处理数据

然后就是要操作数据库了

JavaScript Code复制内容到剪贴板
  1. //插入数据 暂时只插入一列    
  2. var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);//创建transaction    
  3. var store = trans.objectStore("todo");//创建Store   
  4. //要操作数据必须建立transaction 和 Store   
  5.   
  6. var data = {   
  7.     "text": todoText,   
  8.     "adsid": new Date().getTime()   
  9. };//一个小数据 adsid是主键   
  10.   
  11. var request = store.put(data); //‘强行’插入   
  12.   
  13. request.onsuccess = function(e) {   
  14.     //成功后执行一些操作   
  15. };   
  16.   
  17. request.onerror = function(e) {   
  18.     console.log("Error Adding: ", e);   
  19. };  
JavaScript Code复制内容到剪贴板
  1. //读取数据   
  2. var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);   
  3. var store = trans.objectStore("todo");   
  4.   
  5. var keyRange = IDBKeyRange.lowerBound(0);   
  6. var cursorRequest = store.openCursor(keyRange);   
  7. //这里用到指针cursor ,openCursor的参数 keyRange是遍历范围 还可以添加遍历方向参数   
  8. //另一种方法是get() 这个就比较简单了直接store.get('键值')就行   
  9.   
  10. cursorRequest.onsuccess = function(e) {   
  11.     var result = e.target.result;   
  12.     if(!!result == false)   
  13.     return;   
  14.   
  15.     console.log(result.value);   
  16.     result.continue(); //循环读取所有数据   
  17. };  
JavaScript Code复制内容到剪贴板
  1. //删除数据   
  2. ...   
  3. store.delete('键值')   
  4. ...  

出了一个小demo

XML/HTML Code复制内容到剪贴板

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网