摘要：在版本測(cè)試正常編寫(xiě)涉及在線演示代碼在的中查看數(shù)據(jù)庫(kù)信息添加數(shù)據(jù)獲取數(shù)據(jù)請(qǐng)輸入刪除數(shù)據(jù)請(qǐng)輸入更新數(shù)據(jù)請(qǐng)輸入代碼代碼不支持不存在當(dāng)前數(shù)據(jù)庫(kù)時(shí)，即為創(chuàng)建參數(shù)數(shù)據(jù)庫(kù)名稱(chēng)，版本號(hào)整數(shù)數(shù)據(jù)庫(kù)已存在，打開(kāi)成功當(dāng)數(shù)據(jù)庫(kù)不存在時(shí)，創(chuàng)建數(shù)據(jù)庫(kù)會(huì)觸發(fā)事件當(dāng)指定

[toc]

在chrome(版本 70.0.3538.110)測(cè)試正常
編寫(xiě)涉及：css, html, js

在線演示codepen

indexedDB
在 DevTools 的 Application 中查看數(shù)據(jù)庫(kù)信息

添加數(shù)據(jù)

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


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


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

button {
    margin: 10px 0;
    padding: 8px 10px;
    border: 0;
    color: #fff;
    background-color: rgb(7, 196, 230);
}
input{
    padding: 8px 5px;
    border: rgb(7, 196, 230) solid 1px
}

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
if (!window.indexedDB) {
    alert("不支持indexDB")
}

const DATA_BASE = "TEST_DB"
let db = {}

/**
    1. 不存在當(dāng)前數(shù)據(jù)庫(kù)時(shí)，即為創(chuàng)建
    2. open參數(shù)：數(shù)據(jù)庫(kù)名稱(chēng)，版本號(hào)（整數(shù)）
*/
const request = window.indexedDB.open(DATA_BASE, 1) 

request.onerror = function (e) {
    console.error("error", e)
}

/**
    1. 數(shù)據(jù)庫(kù)已存在，打開(kāi)成功
*/
request.onsuccess = function (event) {
    db = event.target.result
    console.log("execute onsuccess");
};

/**
    1. 當(dāng)數(shù)據(jù)庫(kù)不存在時(shí)，創(chuàng)建數(shù)據(jù)庫(kù)會(huì)觸發(fā) onupgradeneeded 事件
    2. 當(dāng)指定的版本號(hào)高于當(dāng)前時(shí)會(huì)直接觸發(fā) onupgradeneeded 事件
    3. 唯一可以修改數(shù)據(jù)庫(kù)結(jié)構(gòu)的事件
*/
request.onupgradeneeded = function (event) {
    /**
        1. 保存 IDBDataBase 接口（數(shù)據(jù)庫(kù)）
    */
    db = event.target.result
    console.log("execute onupgradeneeded");

    /**
        1.使用鍵生成器,測(cè)試時(shí)，去除注釋即可
    */
    // const objectStore = db.createObjectStore("users", { autoIncrement : true })
    // objectStore.add({name: "123"});
    // objectStore.add("123");

    /**
        1. 為當(dāng)前數(shù)據(jù)庫(kù)創(chuàng)建對(duì)象倉(cāng)庫(kù)（表） 
        2. 這里的keyPath 相當(dāng)于主鍵
        3. createIndex(indexName, keyPath, {unique | multiEntry | locale})
    */
    const objectStore = db.createObjectStore("users", { keyPath: "id" })
    objectStore.createIndex("name", "name", { unique: false })
    objectStore.createIndex("age", "age", { unique: false })

    /**
        1. 確保初始化數(shù)據(jù)的時(shí)候，對(duì)象倉(cāng)庫(kù)已經(jīng)創(chuàng)建完畢
    */
    objectStore.transaction.oncomplete = function(event) {
        const transaction = db.transaction(["users"], "readwrite")
        const objStore = transaction.objectStore("users")
        objStore.add({
            id: 12, 
            name: `hew-${Math.random()}` ,
            age: parseInt( Math.random() * 100, 10)
        })
    }
}

/**
    1. 所有數(shù)據(jù)庫(kù)操作都基于事務(wù)
    2. 事務(wù)三種模式：readonly，readwrite，versionchange
    3. 修改數(shù)據(jù)庫(kù)模式或結(jié)構(gòu)——包括新建或刪除對(duì)象倉(cāng)庫(kù)或索引，只能用 versionchange 模式
*/
function addDBData() {
    const transaction = db.transaction(["users"], "readwrite")
    const objectStore = transaction.objectStore("users")
    const request = objectStore.add({ 
        id: Math.random() * 10, 
        name: `hew-${Math.random()}` ,
        age: parseInt( Math.random() * 100, 10)
    })

    transaction.oncomplete = function (event) {
        console.log("transaction add complete")
    }

    transaction.onerror = function (error) {
        console.error("add error", error)
    }

    request.onsuccess = function (event) {
        console.log("add complete")
    }
}

function getDBData() {
    const id = parseFloat(document.getElementById("getID").value)
    const transaction = db.transaction(["users"], "readwrite")
    const objectStore = transaction.objectStore("users")

    /**
        1. 注意數(shù)據(jù)類(lèi)型
    */
    const request = objectStore.get(id)

    request.onsuccess = function (event) {
        console.log("get complete", event.target.result)
        document.getElementById("display").innerHTML = JSON.stringify(request.result)
    }

    request.onerror = function (err) {
        console.error("get error", err)
    }
}

function updateDBData() {
    const id = parseFloat(document.getElementById("updateID").value)
    const transaction = db.transaction(["users"], "readwrite")
    const objectStore = transaction.objectStore("users")
    const request = objectStore.get(id)

    request.onsuccess = function (event) {
        const d = event.target.result
        d.name = "name name"
        const objectStoreUpdate = objectStore.put(d)
        objectStoreUpdate.onsuccess = function (e) {
            console.log("update success")
        }
        
        document.getElementById("display").innerHTML = "update success"
    }

    request.onerror = function (err) {
        console.error("get error", err)
    }
        
}

function delDBData() {
    const id = parseFloat(document.getElementById("delID").value)
    const request = db.transaction(["users"], "readwrite").objectStore("users").delete(id)

    request.onsuccess = function() {
        console.log("delete complete", id);
    }
}

參考
若有疑問(wèn)或錯(cuò)誤，請(qǐng)留言，謝謝！Github blog issues