亚洲欧美日韩综合系列在线_91精品人妻一区二区_欧美大肥婆一级特大AA片_九色91视频免费观看_亚洲综合国产精品_av中文字幕在线不卡_久久精品色综合网_看黄色视频的软件_无卡无码高清中文字幕码2024_亚洲欧美日韩天堂网

簡(jiǎn)介

前端從發(fā)展到現(xiàn)在已經(jīng)形成了一定的瀏覽器存儲(chǔ)數(shù)據(jù)的方式，有cookie、sessionStorage、localStorage、indexedDB以及被廢棄的web sql.

特點(diǎn)：

鍵值對(duì)存儲(chǔ) 每一條數(shù)據(jù)有一個(gè)主鍵，主鍵獨(dú)一無(wú)二，實(shí)行key-value進(jìn)行存儲(chǔ)。

異步操作 實(shí)行異步操作。

支持事務(wù) 支持事務(wù)操作意味著數(shù)據(jù)操作只有成功和失敗兩種狀態(tài)。

同源策略 每一個(gè)數(shù)據(jù)庫(kù)對(duì)應(yīng)創(chuàng)建它的域名，只能訪(fǎng)問(wèn)自身域名下的數(shù)據(jù)庫(kù)。

存儲(chǔ)空間大 支持大于250M的數(shù)據(jù)，甚至沒(méi)有上限

支持二進(jìn)制存儲(chǔ) 可以存儲(chǔ)二進(jìn)制數(shù)據(jù)。

數(shù)據(jù)庫(kù)操作

數(shù)據(jù)庫(kù)連接與創(chuàng)建數(shù)據(jù)庫(kù)

使用window對(duì)象indexedDB屬性的open()方法，其中第一個(gè)參數(shù)是數(shù)據(jù)庫(kù)名稱(chēng)，如果存在就打開(kāi)數(shù)據(jù)庫(kù)不存在就創(chuàng)建。第二個(gè)參數(shù)是數(shù)據(jù)庫(kù)的版本是大于0的正整數(shù)。

數(shù)據(jù)庫(kù)打開(kāi)時(shí)，會(huì)觸發(fā)4中事件:

success: 打開(kāi)成功。

error: 打開(kāi)失敗

upgradeneeded: 第一次打開(kāi)該數(shù)據(jù)庫(kù)，或者數(shù)據(jù)庫(kù)版本發(fā)生變化時(shí)觸發(fā)。

blocked: 上一次的數(shù)據(jù)庫(kù)連接還未關(guān)閉

注意：第一次打開(kāi)數(shù)據(jù)庫(kù)時(shí)，會(huì)先觸發(fā)upgradeneeded事件，然后觸發(fā)success事件。

let  request = indexedDB.open(name, 1);

request.onsuccess = function(e){

  db = e.target.result;

}

創(chuàng)建"對(duì)象倉(cāng)庫(kù)"

使用createObjectStore()進(jìn)行對(duì)象倉(cāng)庫(kù)的創(chuàng)建。

第一個(gè)參數(shù)是倉(cāng)庫(kù)名稱(chēng)，同一個(gè)數(shù)據(jù)庫(kù)中不可以重復(fù)。

第二個(gè)參數(shù)是一個(gè)對(duì)象，包含keyPath和autoIncrement，分別表示每條記錄的鍵名和是否使用自動(dòng)遞增的整數(shù)作為鍵名，默認(rèn)為false

db.createObjectStore(name[,options]);

//一般創(chuàng)建倉(cāng)庫(kù)都在upgradeneeded事件中

        request.addEventListener('upgradeneeded', e => {

            db = e.target.result;

            if(!db.objectStoreNames.contains('person')){

                let store = db.createObjectStore(table, {keyPath: 'keyword', autoIncrement: false});

            }

事務(wù)的操作

indexedDB支持事務(wù)操作，事務(wù)就是說(shuō)在對(duì)數(shù)據(jù)庫(kù)的操作只有成功和失敗這兩種可能，所以說(shuō)在進(jìn)行數(shù)據(jù)庫(kù)的操作之前需要先創(chuàng)建事務(wù)。

name是要操作的倉(cāng)庫(kù)的名稱(chēng)

readwrite是對(duì)倉(cāng)庫(kù)進(jìn)行什么操作

const tx = db.transaction(name, 'readwrite');

1

新增操作

indexedDB數(shù)據(jù)庫(kù)也可以進(jìn)行添加數(shù)據(jù)的操作，需要先添加事務(wù),使用add進(jìn)行添加，但是如果是相同的就會(huì)操作失敗。還可以使用鏈?zhǔn)秸{(diào)用，indexedDB操作時(shí)異步操作，所以需要進(jìn)行監(jiān)聽(tīng)事件監(jiān)聽(tīng)成功和失敗。

const tx = db.transaction('name', 'readwrite');

const store = tx.objectStore('name');

const add = store.add({keyword:'table',s:0});

add.addEventListener('success', e => {

      console.log('操作成功');

})

add.addEventListener('error', e => {

        console.log('操作失敗');

})

更新數(shù)據(jù)

如果想添加相同的數(shù)據(jù)可以使用put方法

const tx = db.transaction('name', 'readwrite');

const store = tx.objectStore('name');

const add = store.put({keyword:'table',s:0});

add.addEventListener('success', e => {

      console.log('操作成功');

})

add.addEventListener('error', e => {

        console.log('操作失敗');

})

獲取數(shù)據(jù)

使用get方法，通過(guò)key值獲得該值。

const get = db.transaction('name','readwrite')

.objectStore('name')

 .get('keyword');

刪除數(shù)據(jù)

使用delete方法，通過(guò)key值進(jìn)行刪除

const get = db.transaction('name','readwrite')

.objectStore('name')

 .delete('keyword');

游標(biāo)的使用

indexedDB有一種游標(biāo)操作，從倉(cāng)庫(kù)的第一條開(kāi)始一直遍歷到最后一條，使用openCursor創(chuàng)建，使用continue,result就是倉(cāng)庫(kù)中的所有數(shù)據(jù)。

const cursor = db.transaction('users').objectStore('users').openCursor();

cursor.addEventListener('success',e=>{

      let result = e.target.result;

       if(result){

            console.log('cursor',result);

             cursor.continue();//可以將地址指針指向下一個(gè)地址。

         }else{

               console.log('遍歷完成',result);

        }

})