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

資訊專欄INFORMATION COLUMN

前端存儲(chǔ) (4) - IndexDB

clasnake / 2846人閱讀

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

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

demo地址

簡(jiǎn)介

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

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

IndexDB 和 WebSql的差別

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

基本使用

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


var dbName = "the_name";
var db ;

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

request.onsuccess = function(event){

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

  db = event.target.result;
  // 創(chuàng)建一個(gè)對(duì)象存儲(chǔ)空間來(lái), 自增主鍵
  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");
// 打開存儲(chǔ)對(duì)象
var objectStore = transaction.objectStore("customers");
// 添加到數(shù)據(jù)對(duì)象中

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);
};
存儲(chǔ)大小 50MB 左右 應(yīng)用場(chǎng)景

跨 Tab 通信

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

文章來(lái)自胡城的個(gè)人網(wǎng)站

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

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

相關(guān)文章

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

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

    孫吉亮 評(píng)論0 收藏0

  • 瀏覽器緩存原理以及本地存儲(chǔ)

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

    roundstones 評(píng)論0 收藏0

  • 瀏覽器緩存原理以及本地存儲(chǔ)

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

    Rindia 評(píng)論0 收藏0

  • 瀏覽器緩存原理以及本地存儲(chǔ)

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

    inapt 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<