您現在的位置是:電腦技術吧?>? 故障問題 ??>??什么是數據庫索引,數據庫索引怎么用??>??正文詳情

什么是數據庫索引,數據庫索引怎么用

黎景彰2019-12-02 11:32:17 人圍觀
簡介SQL數據庫介紹了indexeddb是一個HTML5 web數據庫,它允許html5web應用程序在用戶瀏覽器中存儲數據。Indexeddb非常強大,對應用程序非常有用。它數據庫

介紹  IndexedDB是HTML5 WEB數據庫,允許HTML5 WEB應用在用戶瀏覽器端存儲數據。

對于應用來說IndexedDB非常強大、有用,可以在客戶端的chrome,IE,Firefox等WEB瀏覽器中存儲大量數據,下面簡單介紹一下IndexedDB的基本概念。

  什么是IndexedDB  IndexedDB,HTML5新的數據存儲,可以在客戶端存儲、操作數據,可以使應用加載地更快,更好地響應。

它不同于關系型數據庫,擁有數據表、記錄。

它影響著我們設計和創建應用程序的方式。

IndexedDB 創建有數據類型和簡單的JavaScript持久對象的object,每個object可以有索引,使其有效地查詢和遍歷整個集合。

本文為您提供了如何在Web應用程序中使用IndexedDB的真實例子。

  開始  我們需要在執行前包含下面前置代碼  JavaScript Code復制內容到剪貼板  var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;  //prefixes of window.IDB objects  var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;  var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange  if (!indexedDB) {  alert(Your browser doesn't support a stable version of IndexedDB.)  }  打開IndexedDB  在創建數據庫之前,我們首先需要為數據庫創建數據,假設我們有如下的用戶信息:  JavaScript Code復制內容到剪貼板  var userData = [  { id: 1, name: Tapas, age: 33, email: [email protected] },  { id: 2, name: Bidulata, age: 55, email: [email protected] }  ];  現在我們需要用open()方法打開我們的數據庫:  JavaScript Code復制內容到剪貼板  var db;  var request = indexedDB.open(databaseName, 1);  request.onerror = function(e) {  console.log(error: , e);  };  request.onsuccess = function(e) {  db = request.result;  console.log(success: db);  };  request.onupgradeneeded = function(e) {  }  如上所示,我們已經打開了名為databaseName,指定版本號的數據庫,open()方法有兩個參數:  1.第一個參數是數據庫名稱,它會檢測名稱為databaseName的數據庫是否已經存在,如果存在則打開它,否則創建新的數據庫。

  2.第二個參數是數據庫的版本,用于用戶更新數據庫結構。

  onSuccess處理  發生成功事件時onSuccess被觸發,如果所有成功的請求都在此處理,我們可以通過賦值給db變量保存請求的結果供以后使用。

  onerror的處理程序  發生錯誤事件時onerror被觸發,如果打開數據庫的過程中失敗。

  Onupgradeneeded處理程序  如果你想更新數據庫(創建,刪除或修改數據庫),那么你必須實現onupgradeneeded處理程序,使您可以在數據庫中做任何更改。

在onupgradeneeded處理程序中是可以改變數據庫的結構的唯一地方。

  創建和添加數據到表:  IndexedDB使用對象存儲來存儲數據,而不是通過表。

每當一個值存儲在對象存儲中,它與一個鍵相關聯。

它允許我們創建的任何對象存儲索引。

索引允許我們訪問存儲在對象存儲中的值。

下面的代碼顯示了如何創建對象存儲并插入預先準備好的數據:  JavaScript Code復制內容到剪貼板  request.onupgradeneeded = function(event) {  var objectStore = event.target.result.createObjectStore(users, {keyPath: id});  for (var i in userData) {  objectStore.add(userData[i]);  }  }  我們使用createObjectStore()方法創建一個對象存儲。

此方法接受兩個參數: - 存儲的名稱和參數對象。

在這里,我們有一個名為users的對象存儲,并定義了keyPath,這是對象唯一性的屬性。

在這里,我們使用id作為keyPath,這個值在對象存儲中是唯一的,我們必須確保該ID的屬性在對象存儲中的每個對象中存在。

一旦創建了對象存儲,我們可以開始使用for循環添加數據進去。

  手動將數據添加到表:  我們可以手動添加額外的數據到數據庫中。

  JavaScript Code復制內容到剪貼板  function Add() {  var request = db.transaction([users], readwrite).objectStore(users)  .add({ id: 3, name: Gautam, age: 30, email: [email protected] });  request.onsuccess = function(e) {  alert(Gautam has been added to the database.);  };  request.onerror = function(e) {  alert(Unable to add the information.);  }  }  之前我們在數據庫中做任何的CRUD操作(讀,寫,修改),必須使用事務。

該transaction()方法是用來指定我們想要進行事務處理的對象存儲。

transaction()方法接受3個參數(第二個和第三個是可選的)。

第一個是我們要處理的對象存儲的列表,第二個指定我們是否要只讀/讀寫,第三個是版本變化。

  從表中讀取數據  get()方法用于從對象存儲中檢索數據。

我們之前已經設置對象的id作為的keyPath,所以get()方法將查找具有相同id值的對象。

下面的代碼將返回我們命名為Bidulata的對象:  JavaScript Code復制內容到剪貼板  function Read() {  var objectStore = db.transaction([users]).objectStore(users);  var request = objectStore.get(2);  request.onerror = function(event) {  alert(Unable to retrieve data from database!);  };  request.onsuccess = function(event) {  if(request.result) {  alert(Name: request.result.name , Age: request.result.age , Email: request.result.email);  } else {  alert(Bidulata couldn't be found in your database!);  }  };  }  從表中讀取所有數據  下面的方法檢索表中的所有數據。

這里我們使用游標來檢索對象存儲中的所有數據:  JavaScript Code復制內容到剪貼板  function ReadAll() {  var objectStore = db.transaction(users).objectStore(users);  var req = objectStore.openCursor();  req.onsuccess = function(event) {  db.close();  var res = event.target.result;  if (res) {  alert(Key res.key is res.value.name , Age: res.value.age , Email: res.value.email);  res.continue();  }  };  req.onerror = function (e) {  console.log(Error Getting: , e);  };  }  該openCursor()用于遍歷數據庫中的多個記錄。

在continue()函數中繼續讀取下一條記錄。

  刪除表中的記錄  下面的方法從對象中刪除記錄。

  JavaScript Code復制內容到剪貼板  function Remove() {  var request = db.transaction([users], readwrite).objectStore(users).delete(1);  request.onsuccess = function(event) {  alert(Tapas's entry has been removed from your database.);  };  }  我們要將對象的keyPath作為參數傳遞給delete()方法。

  最終代碼  下面的方法從對象源中刪除一條記錄:  JavaScript Code復制內容到剪貼板

  1. !DOCTYPE html head
  2. meta http-equiv=Content-Type content=text/html; charset=utf-8 / titleIndexedDB/title
  3. script type=text/javascript var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
  4. //prefixes of window.IDB objects
  5. var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction; var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
  6. if (!indexedDB) {
  7. alert(Your browser doesn't support a stable version of IndexedDB.) }
  8. var customerData = [ { id: 1, name: Tapas, age: 33, email: [email protected] },
  9. { id: 2, name: Bidulata, age: 55, email: [email protected] } ];
  10. var db; var request = indexedDB.open(newDatabase, 1);
  11. request.onerror = function(e) {
  12. console.log(error: , e); };
  13. request.onsuccess = function(e) {
  14. db = request.result; console.log(success: db);
  15. };
  16. request.onupgradeneeded = function(event) {
  17. } request.onupgradeneeded = function(event) {
  18. var objectStore = event.target.result.createObjectStore(users, {keyPath: id}); for (var i in userData) {
  19. objectStore.add(userData[i]); }
  20. } function Add() {
  21. var request = db.transaction([users], readwrite) .objectStore(users)
  22. .add({ id: 3, name: Gautam, age: 30, email: [email protected] });
  23. request.onsuccess = function(e) { alert(Gautam has been added to the database.);
  24. };
  25. request.onerror = function(e) { alert(Unable to add the information.);
  26. }
  27. } function Read() {
  28. var objectStore = db.transaction(users).objectStore(users); var request = objectStore.get(2);
  29. request.onerror = function(event) { alert(Unable to retrieve data from database!);
  30. }; request.onsuccess = function(event) {
  31. if(request.result) { alert(Name: request.result.name , Age: request.result.age , Email: request.result.email);
  32. } else { alert(Bidulata couldn't be found in your database!);
  33. } };
  34. } function ReadAll() {
  35. var objectStore = db.transaction(users).objectStore(users); var req = objectStore.openCursor();
  36. req.onsuccess = function(event) { db.close();
  37. var res = event.target.result; if (res) {
  38. alert(Key res.key is res.value.name , Age: res.value.age , Email: res.value.email); res.continue();
  39. } };
  40. req.onerror = function (e) { console.log(Error Getting: , e);
  41. }; }
  42. function Remove() { var request = db.transaction([users], readwrite).objectStore(users).delete(1);
  43. request.onsuccess = function(event) { alert(Tapas's entry has been removed from your database.);
  44. }; }
  45. /script /head
  46. body
  47. button onclick=Add()Add record/button button onclick=Remove()Delete record/button
  48. button onclick=Read()Retrieve single record/button button onclick=ReadAll()Retrieve all records/button
  49. /body /html
  鎖  localStorage是不帶lock功能的。

那么要實現前端的數據共享并且需要lock功能那就需要使用其它本儲存方式,比如indexedDB。

indededDB使用的是事務處理的機制,那實際上就是lock功能。

  做這個測試需要先簡單的封裝下indexedDB的操作,因為indexedDB的連接比較麻煩,而且兩個測試頁面都需要用到  JavaScript Code復制內容到剪貼板  //db.js  //封裝事務操作  IDBDatabase.prototype.doTransaction=function(f){  f(this.transaction([Obj],readwrite).objectStore(Obj));  };  //連接數據庫,成功后調用main函數  (function(){  //打開數據庫  var cn=indexedDB.open(TestDB,1);  //創建數據對象  cn.onupgradeneeded=function(e){  e.target.result.createObjectStore(Obj);  };  //數據庫連接成功  cn.onsuccess=function(e){  main(e.target.result);  };  })();  接著是兩個測試頁面  把localStorage換成了indexedDB事務處理。

但是結果就不同

  測試的時候b.html中可能不會立即有輸出,因為indexedDB正忙著處理a.html東西,b.html事務丟在了事務丟隊列中等待。

但是無論如何,輸出結果也不會是1這個值。

因為indexedDB的最小處理單位是事務,而不是localStorage那樣以表達式為單位。

這樣只要把lock和unlock之間需要處理的東西放入一個事務中即可實現。

另外,瀏覽器對indexedDB的支持不如localStorage,所以使用時還得考慮瀏覽器兼容。

版權聲明:本文由 黎景彰 整理編輯。

原標題:數據庫索引類型,數據庫索引是什么意思

轉載注明出處:http://www.dn9ww09s.icu/fault/14981.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 小王子粘土,輕粘土小王子教程

    小王子粘土,輕粘土小王子教程 相關圖片超輕粘土小王子教程視頻你好,我是Erwa,騰訊tgidas的動畫師。我很榮幸能參加與小王子電影聯合推出的游戲版《小王子的愛情消除》的H5世界觀推廣活動。同時,我們還制作了另一個版...

  • 中外廣告差別,什么是好廣告

    中外廣告差別,什么是好廣告 相關圖片哪個國家的廣告好在網絡傳播領域,我一直在探索與用戶更好的溝通和信息傳遞!在解釋H5廣告與傳統廣告的區別時,筆者試圖用一幅圖片來概括一種內容,讓看護者更簡單地理解其內涵...

  • 案例精選,成功策劃案例精選

    案例精選,成功策劃案例精選 相關圖片商業策劃案例精選這項審查于7月初完成。一方面,我的“廣告愛看!“騰訊十大最佳HTML5廣告”出人意料地在業內大受歡迎。另一方面,有傳聞稱,公眾評論HTML5的代理公司不再制作H保...

  • 三角箭頭,三角箭頭圖標

    三角箭頭,三角箭頭圖標 相關圖片三箭頭使用CSS制作不帶圖片和箭頭的div box(此代碼更適合追求純代碼的人)這種效果也可以用圖片背景實現,代碼將更加簡潔CSS代碼:CSS代碼將內容復制到剪貼板d箭頭...

  • 全方位了解,全方位

    全方位了解,全方位 相關圖片如何全方位了解公司這是一個adobe建議:CSS區域,它提供了一種在多個不同元素中排列內容的方法。首先,需要為內容容器的flow屬性聲明一個唯一的字符值,然后使用from()函數全方面...

  • qt安裝教程及配置,plsql安裝教程及配置

    qt安裝教程及配置,plsql安裝教程及配置 相關圖片tomcat9的安裝與配置Cobbler是一種快速網絡安裝的Linux服務,經過調整還可以支持windows的網絡安裝。這個工具是用Python開發的,它小巧輕便(只有15K行Pythotomcat的安裝與配置...

  • 響應式的,什么是響應式

    響應式的,什么是響應式 相關圖片網頁響應式在整個網站的發展過程中,圖片的管理難度很大。請注意,圖片應在各種設備上平滑顯示。他們會遇到的問題是:適當優化和縮小圖片尺寸,注意不要浪費帶寬(網站加載速...

  • Java編程,g代碼編程詳解

    Java編程,g代碼編程詳解 相關圖片宏程序編程一百例隨著CSS的發展,CSS具有語義命名約定和CSS層的分離,這將有助于CSS的可擴展性、性能改進和代碼管理。在我之前的文章中討論過的許多CSS問題可以通過使用適當編程初...

  • 百分比是單位嗎,百分比怎么算

    百分比是單位嗎,百分比怎么算 相關圖片計算百分比視區單位視區單位是相對單位,這意味著它們沒有客觀尺寸。它們的大小由視區的大小決定。這里有四個與視區相關的單位。我會把重點放在前兩個單元上,因為它們更有可...

  • 私有倉庫搭建,私有helm倉庫搭建

    私有倉庫搭建,私有helm倉庫搭建 相關圖片maven私有倉庫一。Docker registry描述了本文中記錄的設置Docker注冊表的完整操作過程。雖然官方提供dockerhub作為一個開放的集中倉庫,但可以想象,中國nexus 搭建 私有倉庫...

熱評文章

  • 吳亦凡,吳亦凡個人資料

    吳亦凡,吳亦凡個人資料 相關圖片吳亦凡在追娜扎創意總是一個命題作文。在項目的早期階段,團隊了解到:1。吳一凡簽署的全國攻勢將是一場立體完整的戰役,品牌團隊希望tgidas能通過在H5模塊中的精彩創意引爆話題...

  • 七夕秀恩愛,七夕怎么樣秀恩愛

    七夕秀恩愛,七夕怎么樣秀恩愛 相關圖片情人節秀恩愛的說說七夕節的愛情也取決于時間。不能早也不能晚。因為愛的表露遲早會有報應的,所以我們選擇了周五中午,這也可以讓牛郎和織女的鵲橋更加堅固耐用。接下來,讓...

  • 平面設計怎么提升自己,平面設計提升方法

    平面設計怎么提升自己,平面設計提升方法 相關圖片平面設計提升培訓機構現在H5廣告非常流行,平面設計師必須想辦法提高自己。今天,我想總結一些平面設計自我完善的經驗。設計行業變化很快。它可以分為三個部分:內容、表演技巧...

  • 平面設計師,什么叫平面設計師

    平面設計師,什么叫平面設計師 相關圖片平面設計師職責隨著HTML5的普及,平面設計師該怎么做?今天,epub360從設計內容、表現技巧和理念三個方面,來談談平面設計師如何在這股浪潮中成功站穩腳跟。文章附有大量的實平面...

  • ol標簽,ol標簽怎么設置

    ol標簽,ol標簽怎么設置 相關圖片ol值定義和使用ol標記定義一個序列表。HTML 4.01和HTML 5的區別在html4.01中,不支持start屬性,html5中允許這樣做。在HTML4.01中ol標簽可以居中嗎...

  • 秦淮八絕,秦淮八艷

    秦淮八絕,秦淮八艷 相關圖片熱愛祖國的古詩八句一。選擇!生活微信電影宣傳推送廣告(上線時間:2014年11月)。坦白地說,我第一次沒有看到這個廣告,但我是通過搜索找到的。與2014年大量簡單互動的初級H5廣...

  • html5空格,html多個空格

    html5空格,html多個空格 相關圖片空格html代碼為遇到這樣的朋友,在編譯HTML代碼時,兩個字之間有空格,他沒有在兩個字之間加空格,就沒有代碼。在這種情況下,很難找出問題時,HTML編碼沒有使用太多或熟練。查看...

  • 生存曲線繪制,roc曲線怎么繪制

    生存曲線繪制,roc曲線怎么繪制 相關圖片奈奎斯特曲線繪制步驟帆布二維曲線法是近年來研究的一種三維柔體計算方法,在一定程度上填補了一些知識。它往往涉及到數值分析的某些方面,主要是曲線的各種插值算法。我突然...

  • 平面設計師,什么叫平面設計師

    平面設計師,什么叫平面設計師 相關圖片平面設計師職責如上所述,由于互聯網行業的介入,零售、金融、房地產、汽車、通信、旅游等眾多行業作為各行業中下游的一個崗位,其一貫規律發生了變化,無論是受客戶老板的強...

  • 情懷時代,不同的時代不同的情懷

    情懷時代,不同的時代不同的情懷 相關圖片有一種情懷叫一。微信電影宣傳上線時間及“選擇!生活”:2014年11月,坦白說,我第一次沒有看到這個廣告,但我是通過搜索找到的。與2014年大量簡單互動的初級H5廣告相比,新時代...

關注微信

变脸官网查询