您現在的位置是:電腦技術吧?>? 組裝維修 ??>??什么是數據庫索引,數據庫索引怎么用??>??正文詳情

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

聶和怡2019-11-22 15:11:42 人圍觀
簡介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/assemble/13955.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • 南方航空什么座位最好,南方航空未開放選座

    南方航空什么座位最好,南方航空未開放選座 相關圖片東航73h最佳座位南航應用程序是南航正式推出的旅游軟件。通過這個軟件,用戶可以在線選擇座位。那么,南航如何選擇座位呢?現在,超人軟件編輯想介紹中國南方航空公司的iPhone版...

  • 餅狀巖芯,柱狀餅圖

    餅狀巖芯,柱狀餅圖 相關圖片如何做餅狀統計圖今天,我們想達到一個長任務等待的提示效果,設計師給了我一個GIF效果圖,內容如下:根據公眾的實踐,我應該直接按照圖片,調整布局,然后早點回家娶個老婆,...

  • pdf怎么轉文檔格式,docx怎么轉換jpg

    pdf怎么轉文檔格式,docx怎么轉換jpg 相關圖片pdf改為docx我相信大多數小伙伴使用PDF轉換器轉換成word后,文件擴展名就是。醫生?所以最近,許多小伙伴來問小編輯如何將PDF轉換成docx格式。現在,超人軟件編輯將介紹手機pdf怎么轉...

  • 鼠標設置,電腦鼠標沒反應怎么辦

    鼠標設置,電腦鼠標沒反應怎么辦 相關圖片鼠標點了電腦沒反應首先,讓我們看看這個例子的效果。如果鼠標在場景中的不同位置被刷過,場景中的惡棍會有不同的反應。特別有趣的是,當鼠標穿越的速度不同時,反應的強度也...

  • 帶命令行的安全模式,命令提示符進入安全模式

    帶命令行的安全模式,命令提示符進入安全模式 相關圖片windows安全模式Bat命令可以幫助用戶在win10系統中快速進入安全模式。win10如何使用bat命令行進入安全模式?下一步,超人軟件編輯將介紹win10系統的bat命令,趕快win7安全模式怎么進...

  • 網頁設計要注意什么,網頁設計需要什么

    網頁設計要注意什么,網頁設計需要什么 相關圖片網頁設計注意要點一。記住:你能控制的時間是有限的。我只能在4秒鐘內瀏覽普通網頁,所以你沒有足夠的時間吸引用戶并讓他們繼續瀏覽你的網站。也就是說,你應該盡可能準確地描...

  • 打開軟件假死,頁面假死

    打開軟件假死,頁面假死 相關圖片應用程序假死最近,許多小伙伴報告說,當他們的win7系統計算機打開文件夾時,他們總是裝死。那么win7打開的文件夾的偽死呢?接下來,超人軟件將為您帶來一個解決方案,解決wi一打...

  • 派派豬理財怎么樣,派派豬官網

    派派豬理財怎么樣,派派豬官網 相關圖片派派靠譜嗎怎么樣現在支付寶的收入越來越低,人們開始關注其他金融產品。他們中的一些人選擇了一種叫做餡餅的金融產品。派豬可靠嗎?讓我們與廣州下屬超人軟件站編輯派豬一起...

  • 代碼示例文字英文,楔形文字

    代碼示例文字英文,楔形文字 相關圖片文愛示例文本隱慾效果說明:鼠標放在文本上,文本樣式會發生變化,如無下劃線、文本會閃爍等,結合其他樣式屬性,也可以實現按鈕式文本鏈接,效果如圖所示具體操作步驟:步驟...

  • 派派是不是微信好友,派派新版本怎么刪通訊錄好友

    派派是不是微信好友,派派新版本怎么刪通訊錄好友 相關圖片有對方微信號怎么整人拍拍是一種植根于熟人的聊天和社交軟件。最近,在我的青春年華里,派派再一次受到關注。那么餡餅是如何欺騙朋友的呢?現在,超人軟件編輯將為大家介紹一...

熱評文章

  • 月輪加速器,月輪加速器怎么樣

    月輪加速器,月輪加速器怎么樣 相關圖片好用的加速器月輪加速器以其自由、良好的減阻效果受到眾多用戶的青睞。但也有用戶發現,月輪加速器在使用過程中的加速效果因人而異,也有合作伙伴發現月輪加速器的加速效果并...

  • txt格式怎么轉換,txt格式轉換

    txt格式怎么轉換,txt格式轉換 相關圖片TXT轉換Excel相信大家在日常工作和學習生活中都會遇到需要將PDF格式轉換成TXT或word格式的情況。如何將PDF轉換成TXT?如何將PDF轉換為word?接下來,讓超人軟件小說格式轉換器...

  • 信件背景,背景

    信件背景,背景 相關圖片純色背景一。焰火創建了一個新文件,白色繪圖板,形成一個矩形,并用eef8e0填充它。這是照片。2。用濾鏡效果眼糖4000填充矩形——如圖3所示抖動。為矩形添加內部照明效信箋壁紙...

  • 安全守護電話手表怎樣調時間,安全守護手表使用方法

    安全守護電話手表怎樣調時間,安全守護手表使用方法 相關圖片安全守護2如何調時間安全手表是一種可以直接在手機上管理手表的軟件。通過該軟件,您可以接收到位置信息,以確保兒童的安全。那么如何使用安全手表呢?保安值班時間怎么定?現...

  • 什么是網頁安全色,安全色

    什么是網頁安全色,安全色 相關圖片安全色為什么顏色雖然大多數現代計算機支持256色(8位),但網頁上只有216色是通用的。即使現在一般支持16位和32位計算機,10%的計算機顏色限制為256色。上面的圖片是網頁web安全色種...

  • Word轉換成PPT,word轉換成ppt的方法

    Word轉換成PPT,word轉換成ppt的方法 相關圖片2010版ppt轉換成word相信在實際辦公過程中,您已經滿足了將ppt轉換成word或PDF的需要。那么如何將ppt轉換成word呢?現在,超人軟件編輯想介紹如何將ppt轉換成PDF,word怎么變成ppt格式...

  • 魔獸世界軍團再臨app,魔獸世界 軍團助手

    魔獸世界軍團再臨app,魔獸世界 軍團助手 相關圖片魔獸世界舊版軍團助手作為《魔獸世界》的官方游戲助理,《魔獸世界》陸軍便攜式應用程序被《魔獸世界》的所有玩家和好友使用。那么,魔獸世界陸軍的便攜式應用程序一直連接在...

  • 色的成語,色和

    色的成語,色和 相關圖片相近色 對比色 互補色一。暖色暖色主要由紅、橙、黃等紅色色調組成。暖色給人溫暖、舒適、動感的感覺,在網頁設計中可以突出視覺效果。在網頁中使用類似顏色時,請注意色塊的大...

  • win7安全模式都進不去,安全模式也進不了桌面

    win7安全模式都進不去,安全模式也進不了桌面 相關圖片安全模式能進入正常進不去安全模式是Windows操作系統中的一種特殊模式,可以用來修復某些系統錯誤。通過不加載第三方驅動設備,計算機系統可以在最小模式下運行,便于查找和修復...

  • Flash教程,Flash動畫實例教程

    Flash教程,Flash動畫實例教程 相關圖片Flash動畫設計一。圖像處理不當。把一個大的圖像放在閃光燈上,把它縮小到你需要的尺寸。正確的方法是以PS格式處理圖像并將其保存為PNG格式2。矢量地圖太復雜,比如剪紙的效果。原...

關注微信

变脸官网查询