首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

html5 初试 indexedDB(推荐)

Posted in HTML / CSS onJuly 21, 2016

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复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <script>  
  5.       var indexedDB = window.indexedDB || window.webkitIndexedDB ||   
  6.                       window.mozIndexedDB;   
  7.          
  8.       if ('webkitIndexedDB' in window) {   
  9.         windowwindow.IDBTransaction = window.webkitIDBTransaction;   
  10.         windowwindow.IDBKeyRange = window.webkitIDBKeyRange;   
  11.       }   
  12.          
  13.       adsageIDB = {};   
  14.       adsageIDB.db = null;   
  15.          
  16.       adsageIDB.onerror = function(e) {   
  17.         console.log(e);   
  18.       };   
  19.          
  20.       adsageIDB.open = function() {   
  21.         var request = indexedDB.open("adsageIDB");   
  22.          
  23.         request.onsuccess = function(e) {   
  24.           var v = "1.00";   
  25.           adsageIDB.db = e.target.result;   
  26.           var db = adsageIDB.db;   
  27.   
  28.           if (v!= db.version) {   
  29.             var setVrequest = db.setVersion(v);   
  30.          
  31.             setVrequest.onerror = adsageIDB.onerror;   
  32.             setVrequest.onsuccess = function(e) {   
  33.               if(db.objectStoreNames.contains("todo")) {   
  34.                 db.deleteObjectStore("todo");   
  35.               }   
  36.          
  37.               var store = db.createObjectStore("todo",   
  38.                 {keyPath: "adsid"});   
  39.          
  40.               adsageIDB.getAllTodoItems();   
  41.             };   
  42.           }   
  43.           else {   
  44.             adsageIDB.getAllTodoItems();   
  45.           }   
  46.         };   
  47.          
  48.         request.onerror = adsageIDB.onerror;   
  49.       }   
  50.          
  51.       adsageIDB.addTodo = function(todoText) {   
  52.         var db = adsageIDB.db;   
  53.         var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);   
  54.         var store = trans.objectStore("todo");   
  55.          
  56.         var data = {   
  57.           "text": todoText,   
  58.           "adsid": new Date().getTime()   
  59.         };   
  60.          
  61.         var request = store.put(data);   
  62.          
  63.         request.onsuccess = function(e) {   
  64.           adsageIDB.getAllTodoItems();   
  65.         };   
  66.          
  67.         request.onerror = function(e) {   
  68.           console.log("Error Adding: ", e);   
  69.         };   
  70.       };   
  71.          
  72.       adsageIDB.deleteTodo = function(id) {   
  73.         var db = adsageIDB.db;   
  74.         var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);   
  75.         var store = trans.objectStore("todo");   
  76.          
  77.         var request = store.delete(id);   
  78.          
  79.         request.onsuccess = function(e) {   
  80.           adsageIDB.getAllTodoItems();   
  81.         };   
  82.          
  83.         request.onerror = function(e) {   
  84.           console.log("Error Adding: ", e);   
  85.         };   
  86.       };   
  87.          
  88.       adsageIDB.getAllTodoItems = function() {   
  89.         var todos = document.getElementById("todoItems");   
  90.         todos.innerHTML = "";   
  91.          
  92.         var db = adsageIDB.db;   
  93.         var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);   
  94.         var store = trans.objectStore("todo");   
  95.          
  96.         var keyRange = IDBKeyRange.lowerBound(0);   
  97.         var cursorRequest = store.openCursor(keyRange);   
  98.          
  99.         cursorRequest.onsuccess = function(e) {   
  100.           var result = e.target.result;   
  101.           if(!!result == false)   
  102.             return;   
  103.          
  104.           renderTodo(result.value);   
  105.           result.continue();   
  106.         };   
  107.          
  108.         cursorRequest.onerror = adsageIDB.onerror;   
  109.       };   
  110.          
  111.       function renderTodo(row) {   
  112.         var todos = document.getElementById("todoItems");   
  113.         var li = document.createElement("li");   
  114.         var a = document.createElement("a");   
  115.         var t = document.createTextNode(row.text);   
  116.          
  117.         a.addEventListener("click", function() {   
  118.           adsageIDB.deleteTodo(row.adsid);   
  119.         }, false);   
  120.          
  121.         a.textContent = " [删除]";   
  122.         li.appendChild(t);   
  123.         li.appendChild(a);   
  124.         todos.appendChild(li)   
  125.       }   
  126.          
  127.       function addTodo() {   
  128.         var todo = document.getElementById("todo");   
  129.         adsageIDB.addTodo(todo.value);   
  130.         todo.value = "";   
  131.       }   
  132.          
  133.       function init() {   
  134.         adsageIDB.open();   
  135.       }   
  136.          
  137.       window.addEventListener("DOMContentLoaded", init, false);   
  138.     </script>  
  139.   </head>  
  140.   <body>  
  141.     <ul id="todoItems"></ul>  
  142.     <input type="text" id="todo" name="todo" placeholder="adsageIDB text?" />  
  143.     <input type="submit" value="增加一个 IDB" onclick="addTodo(); return false;"/>  
  144.   </body>  
  145. </html>  

以上这篇html5 初试 indexedDB(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

原文地址：http://www.cnblogs.com/androidshouce/archive/2016/07/21/5690444.html

html5 初试 indexedDB(推荐)

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
Jun 03 HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
Nov 27 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 HTML / CSS
h5调用摄像头的实现方法
Jun 01 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
详解基于canvas的视频遮罩插件
Jan 04 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
Mar 20 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
Jul 19 #HTML / CSS
HTML5和CSS3实例教程总结(推荐)
Jul 18 #HTML / CSS
HTML5 拖放功能实现代码
Jul 14 #HTML / CSS
HTML块级标签汇总（小篇）
Jul 13 #HTML / CSS
HTML5进阶段内联标签汇总（小篇）
Jul 13 #HTML / CSS
关于HTML5语义标签的实践(blog页面)
Jul 12 #HTML / CSS
HTML5学习心得总结(推荐)
Jul 08 #HTML / CSS
电路(15) 频偏(1) 灵敏度(1) 数调机(1) 频率(1) 实习报告(1) 高放电路(1) AM(1) 鉴频器(1) 发烧友(1)
You might like
php操作mysql数据库的基本类代码
2014/02/25 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
PHP模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
js中的push和join方法使用介绍
2013/10/08 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
微信小程序如何引用外部js，外部样式，公共页面模板
2019/07/23 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
Python中urllib2模块的8个使用细节分享
2015/01/01 Python
Python 爬虫学习笔记之单线程爬虫
2016/09/21 Python
json跨域调用python的方法详解
2017/01/11 Python
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
详解用python实现简单的遗传算法
2018/01/02 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
如何真正的了解python装饰器
2020/08/14 Python
使用JS+CSS3技术：让你的名字动起来
2013/04/27 HTML / CSS
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
联想哥伦比亚网上商城：Lenovo Colombia
2017/01/10 全球购物
俄罗斯品牌服装和鞋子在线商店：BRIONITY
2020/03/26 全球购物
开学典礼决心书
2014/03/11 职场文书
人事代理委托书
2014/09/27 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
Python操作CSV格式文件的方法大全
2021/07/15 Python
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL