资讯专栏INFORMATION COLUMN

indexedDB添加,删除,获取,修改

MycLambert / 3089人阅读

摘要:在版本测试正常编写涉及在线演示代码在的中查看数据库信息添加数据获取数据请输入删除数据请输入更新数据请输入代码代码不支持不存在当前数据库时,即为创建参数数据库名称,版本号整数数据库已存在,打开成功当数据库不存在时,创建数据库会触发事件当指定

[toc]

在chrome(版本 70.0.3538.110)测试正常
编写涉及:css, html, js

在线演示codepen

html代码

indexedDB

在 DevTools 的 Application 中查看数据库信息

css代码
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
}
JavaScript代码
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
if (!window.indexedDB) {
    alert("不支持indexDB")
}

const DATA_BASE = "TEST_DB"
let db = {}

/**
    1. 不存在当前数据库时,即为创建
    2. open参数:数据库名称,版本号(整数)
*/
const request = window.indexedDB.open(DATA_BASE, 1) 

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

/**
    1. 数据库已存在,打开成功
*/
request.onsuccess = function (event) {
    db = event.target.result
    console.log("execute onsuccess");
};

/**
    1. 当数据库不存在时,创建数据库会触发 onupgradeneeded 事件
    2. 当指定的版本号高于当前时会直接触发 onupgradeneeded 事件
    3. 唯一可以修改数据库结构的事件
*/
request.onupgradeneeded = function (event) {
    /**
        1. 保存 IDBDataBase 接口(数据库)
    */
    db = event.target.result
    console.log("execute onupgradeneeded");

    /**
        1.使用键生成器,测试时,去除注释即可
    */
    // const objectStore = db.createObjectStore("users", { autoIncrement : true })
    // objectStore.add({name: "123"});
    // objectStore.add("123");

    /**
        1. 为当前数据库创建对象仓库(表) 
        2. 这里的keyPath 相当于主键
        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. 确保初始化数据的时候,对象仓库已经创建完毕
    */
    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. 所有数据库操作都基于事务
    2. 事务三种模式:readonly,readwrite,versionchange
    3. 修改数据库模式或结构——包括新建或删除对象仓库或索引,只能用 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. 注意数据类型
    */
    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);
    }
}
参考

若有疑问或错误,请留言,谢谢!Github blog issues

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/99697.html

相关文章

  • 很全很全的前端本地存储讲解

    摘要:正文开始三种本地存储方式前言网络早期最大的问题之一是如何管理状态。这个特点很重要,因为这关系到什么样的数据适合存储在中。特点生命周期持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。 最近一直在搞基础的东西,弄了一个持续更新的github笔记,可以去看看,诚意之作(本来就是写给自己看的……)链接地址:Front-End-Basics 此篇文章的地址:三种本地存储方式 ...

    Cciradih 评论0 收藏0
  • HTML5 进阶系列:indexedDB 数据库

    摘要:版本号必须为整数更新版本,打开版本为的数据库新数据库版本号为我们通过监听请求对象的事件来定义数据库版本更新时执行的方法。 前言 在 HTML5 的本地存储中,有一种叫 indexedDB 的数据库,该数据库是一种存储在客户端本地的 NoSQL 数据库,它可以存储大量的数据。从上篇:HTML5 进阶系列:web Storage ,我们知道 web Storage 可以方便灵活的在本地存取...

    philadelphia 评论0 收藏0
  • 使用IndexedDB做前端日志持久化

    摘要:问题页面如果表现不符合预期,前端工程师在没有日志的情况下,很难。所以就需要针对必要的步骤记录日志,并上传。只能在回调函数中被调用。事物关闭日志对象。处理异常利用的重建因为只能在中调用。 问题 页面如果表现不符合预期,前端工程师在没有 javascript 日志的情况下,很难 debug。所以就需要针对必要的步骤记录日志,并上传。但是每记录一条日志就上传并不是一个合适的选择,譬如如果生成...

    CoderDock 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<