欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

html5 初試 indexedDB(推薦)

  發(fā)布時間：2016-07-21 10:00:03   作者：佚名   我要評論
下面小編就為大家?guī)硪黄猦tml5 初試 indexedDB(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦

indexedDB是存儲大量結(jié)構(gòu)化數(shù)據(jù)的API，demo中用到的是異步API，麻煩的就是所有對indexedDB的操作都會發(fā)生一個異步的‘請求’，只要熟悉了API操作起來也很簡單。

大體流程是這樣

1.打開數(shù)據(jù)庫

JavaScript Code復(fù)制內(nèi)容到剪貼板
  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只有這一個方法  打開（數(shù)據(jù)庫名）   
  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 后創(chuàng)建ObjectStore  暫時用到兩個參數(shù)，數(shù)據(jù)庫&&主鍵   
  21.         }   
  22.     }       
  23. }  

這樣就 創(chuàng)建/連接 了一個數(shù)據(jù)庫

2.創(chuàng)建交互對象 && 監(jiān)聽dom事件 && 處理數(shù)據(jù)

然后就是要操作數(shù)據(jù)庫了

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. //插入數(shù)據(jù) 暫時只插入一列    
  2. var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);//創(chuàng)建transaction    
  3. var store = trans.objectStore("todo");//創(chuàng)建Store   
  4. //要操作數(shù)據(jù)必須建立transaction 和 Store   
  5.   
  6. var data = {   
  7.     "text": todoText,   
  8.     "adsid": new Date().getTime()   
  9. };//一個小數(shù)據(jù) adsid是主鍵   
  10.   
  11. var request = store.put(data); //‘強行’插入   
  12.   
  13. request.onsuccess = function(e) {   
  14.     //成功后執(zhí)行一些操作   
  15. };   
  16.   
  17. request.onerror = function(e) {   
  18.     console.log("Error Adding: ", e);   
  19. };  
JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. //讀取數(shù)據(jù)   
  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的參數(shù) keyRange是遍歷范圍 還可以添加遍歷方向參數(shù)   
  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(); //循環(huán)讀取所有數(shù)據(jù)   
  17. };  
JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. //刪除數(shù)據(jù)   
  2. ...   
  3. store.delete('鍵值')   
  4. ...  

出了一個小demo

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  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(推薦)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

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

相關(guān)文章

  • html5中l(wèi)ocalStorage本地存儲的簡單使用

    我們在做頁面時會用到本地存儲的時候，今天說說localStorage本地存儲。感興趣的朋友一起學(xué)習(xí)吧
    2017-06-16

  • HTML5 LocalStorage 本地存儲刷新值還在

    html5的兩種存儲技術(shù)的最大區(qū)別就是生命周期，接下來通過本文給大家分享HTML5 LocalStorage 本地存儲刷新值還在問題以及使用方法小結(jié)，需要的的朋友參考下本文吧
    2017-03-10

  • 詳解HTML5 LocalStorage 本地存儲

    本篇文章主要介紹了HTML5 LocalStorage 本地存儲 ，HTML5 storage提供了一種方式讓網(wǎng)站能夠把信息存儲到你本地的計算機上，并再以后需要的時候進(jìn)行獲取。有興趣的可以了解
    2016-12-23

  • html5本地存儲 localStorage操作使用詳解

    這篇文章主要介紹了html5本地存儲 localStorage操作使用詳解的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
    2016-09-20

  • Html5 web本地存儲實例詳解

    這篇文章主要介紹了Html5 web本地存儲實例詳解的相關(guān)資料,需要的朋友可以參考下
    2016-07-28

  • HTML5本地存儲之Web Storage詳解

    這篇文章主要為大家詳細(xì)介紹了HTML5本地存儲之Web Storage的相關(guān)資料，Web Storage如何用JSON存儲多個數(shù)據(jù)，感興趣的小伙伴們可以參考一下
    2016-07-04

  • HTML5中indexedDB 數(shù)據(jù)庫的使用實例

    本篇文章主要介紹了HTML5中indexedDB 數(shù)據(jù)庫的使用實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-05-11

  • 深入解析HTML5的IndexedDB索引數(shù)據(jù)庫

    這篇文章主要介紹了深入解析HTML5中的IndexedDB索引數(shù)據(jù)庫,包括事務(wù)鎖等基本功能的相關(guān)使用示例,需要的朋友可以參考下
    2015-09-14

  • HTML5本地存儲之IndexedDB

    IndexedDB 是一種低級API，用于客戶端存儲大量結(jié)構(gòu)化數(shù)據(jù)(包括, 文件/ blobs)。下面通過本文重點給大家介紹HTML5本地存儲之IndexedDB的相關(guān)知識，感興趣的朋友一起看看吧
    2017-06-16

最新評論