国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端存儲 (4) - IndexDB

clasnake / 2838人閱讀

摘要：允許您存儲和檢索用鍵索引的對象可以存儲支持的任何對象。是非關(guān)系型數(shù)據(jù)庫和的差別是關(guān)系型數(shù)據(jù)庫，前端需要寫，目前已經(jīng)瀏覽器基本已經(jīng)放棄基本使用打開數(shù)據(jù)庫并且開始一個事務(wù)。通過監(jiān)聽正確類型的事件以等待操作完成。

IndexDB的出現(xiàn) 是為了存儲更大量的結(jié)構(gòu)化數(shù)據(jù)

demo地址

簡介

IndexedDB是一個事務(wù)型數(shù)據(jù)庫系統(tǒng)，類似于基于SQL的RDBMS。 然而不同的是它使用固定列表（只有 key，value），IndexedDB是一個基于JavaScript的面向?qū)ο蟮臄?shù)據(jù)庫。
IndexedDB允許您存儲和檢索用鍵索引的對象; 可以存儲structured clone algorithm支持的任何對象。
您只需要指定數(shù)據(jù)庫模式，打開與數(shù)據(jù)庫的連接，然后檢索和更新一系列事務(wù)中的數(shù)據(jù)。

IndexedDB 是非關(guān)系型數(shù)據(jù)庫

IndexDB 和 WebSql的差別

WebSql 是關(guān)系型數(shù)據(jù)庫， 前端需要寫sql ，目前 WebSql已經(jīng)瀏覽器基本已經(jīng)放棄

基本使用

1.打開數(shù)據(jù)庫并且開始一個事務(wù)。
2.創(chuàng)建一個 object store。
3.構(gòu)建一個請求來執(zhí)行一些數(shù)據(jù)庫操作，像增加或提取數(shù)據(jù)等。
4.通過監(jiān)聽正確類型的 DOM 事件以等待操作完成。
5.在操作結(jié)果上進(jìn)行一些操作（可以在 request 對象中找到）


var dbName = "the_name";
var db ;

// 連接數(shù)據(jù)庫，沒有就創(chuàng)建數(shù)據(jù)庫
var request = indexedDB.open(dbName, 2);

request.onsuccess = function(event){

    db = request.result;
}
// 錯誤處理程序在這里。
request.onerror = function(event) {
    console.log(event);
};
request.onupgradeneeded = function(event) {

  db = event.target.result;
  // 創(chuàng)建一個對象存儲空間來, 自增主鍵
  var objectStore = db.createObjectStore("customers");
};


// 添加數(shù)據(jù)
var customerData = [
  { id:"1", name: "Bill", age: 35, email: "bill@company.com" },
  {  id:"2", name: "Donna", age: 32, email: "donna@home.org" }
];

var transaction = db.transaction(dbName, "readwrite");
// 打開存儲對象
var objectStore = transaction.objectStore("customers");
// 添加到數(shù)據(jù)對象中

customerData.forEach(function(item){
    objectStore.put(item,item.id);
});

// 查詢
db.transaction("customers").objectStore("customers").get("1").onsuccess = function(event) {
  console.log(event.target.result.name);
};
存儲大小 50MB 左右 應(yīng)用場景

跨 Tab 通信

存儲二進(jìn)制 文件

文章來自胡城的個人網(wǎng)站

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/96157.html

相關(guān)文章

  • IndexedDB 打造靠譜 Web 離線數(shù)據(jù)庫

    摘要：設(shè)置為參數(shù)設(shè)置指定索引，并確保唯一性上面主要做了件事打開數(shù)據(jù)庫表新建，并設(shè)置設(shè)置打開數(shù)據(jù)庫表主要就是版本號和名字，沒有太多講的，我們直接從創(chuàng)建開始吧。打開注意事項(xiàng)檢查是否支持版本更新在生成一個實(shí)例時，需要手動指定一個版本號。 在知乎和我在平常工作中，常常會看到一個問題： 前端現(xiàn)在還火嗎？ 這個我只想說： 隔岸觀火的人永遠(yuǎn)無法明白起火的原因，只有置身風(fēng)暴，才能找到風(fēng)眼之所在 ——『秦時明...

    孫吉亮 評論0 收藏0

  • 瀏覽器緩存原理以及本地存儲

    摘要：私有緩存就是用戶專享的，各級代理不能緩存的緩存。代表使用內(nèi)存中的緩存，則代表使用的是硬盤中的緩存，瀏覽器讀取緩存的順序?yàn)椤? 作為一名前端工作人員，前端的緩存知識是必須掌握的，因?yàn)橐粋€網(wǎng)站打開網(wǎng)頁的速度直接關(guān)系到用戶體驗(yàn)，用戶粘度，而提高網(wǎng)頁的打開速度有很多方面需要優(yōu)化，其中比較重要的一點(diǎn)就是利用好緩存，緩存文件可以重復(fù)利用，還可以減少帶寬，降低網(wǎng)絡(luò)負(fù)荷。 1 緩存 緩存從宏觀上分為私有...

    roundstones 評論0 收藏0

  • 瀏覽器緩存原理以及本地存儲

    摘要：私有緩存就是用戶專享的，各級代理不能緩存的緩存。代表使用內(nèi)存中的緩存，則代表使用的是硬盤中的緩存，瀏覽器讀取緩存的順序?yàn)椤? 作為一名前端工作人員，前端的緩存知識是必須掌握的，因?yàn)橐粋€網(wǎng)站打開網(wǎng)頁的速度直接關(guān)系到用戶體驗(yàn)，用戶粘度，而提高網(wǎng)頁的打開速度有很多方面需要優(yōu)化，其中比較重要的一點(diǎn)就是利用好緩存，緩存文件可以重復(fù)利用，還可以減少帶寬，降低網(wǎng)絡(luò)負(fù)荷。 1 緩存 緩存從宏觀上分為私有...

    Rindia 評論0 收藏0

  • 瀏覽器緩存原理以及本地存儲

    摘要：私有緩存就是用戶專享的，各級代理不能緩存的緩存。代表使用內(nèi)存中的緩存，則代表使用的是硬盤中的緩存，瀏覽器讀取緩存的順序?yàn)椤? 作為一名前端工作人員，前端的緩存知識是必須掌握的，因?yàn)橐粋€網(wǎng)站打開網(wǎng)頁的速度直接關(guān)系到用戶體驗(yàn)，用戶粘度，而提高網(wǎng)頁的打開速度有很多方面需要優(yōu)化，其中比較重要的一點(diǎn)就是利用好緩存，緩存文件可以重復(fù)利用，還可以減少帶寬，降低網(wǎng)絡(luò)負(fù)荷。 1 緩存 緩存從宏觀上分為私有...

    inapt 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<