摘要:在版本測試正常編寫涉及在線演示代碼在的中查看數據庫信息添加數據獲取數據請輸入刪除數據請輸入更新數據請輸入代碼代碼不支持不存在當前數據庫時,即為創建參數數據庫名稱,版本號整數數據庫已存在,打開成功當數據庫不存在時,創建數據庫會觸發事件當指定
[toc]
在chrome(版本 70.0.3538.110)測試正常
編寫涉及:css, html, js
在線演示codepen
html代碼css代碼indexedDB
在 DevTools 的 Application 中查看數據庫信息
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
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/99697.html
摘要:正文開始三種本地存儲方式前言網絡早期最大的問題之一是如何管理狀態。這個特點很重要,因為這關系到什么樣的數據適合存儲在中。特點生命周期持久化的本地存儲,除非主動刪除數據,否則數據是永遠不會過期的。 最近一直在搞基礎的東西,弄了一個持續更新的github筆記,可以去看看,誠意之作(本來就是寫給自己看的……)鏈接地址:Front-End-Basics 此篇文章的地址:三種本地存儲方式 ...
摘要:版本號必須為整數更新版本,打開版本為的數據庫新數據庫版本號為我們通過監聽請求對象的事件來定義數據庫版本更新時執行的方法。 前言 在 HTML5 的本地存儲中,有一種叫 indexedDB 的數據庫,該數據庫是一種存儲在客戶端本地的 NoSQL 數據庫,它可以存儲大量的數據。從上篇:HTML5 進階系列:web Storage ,我們知道 web Storage 可以方便靈活的在本地存取...
摘要:問題頁面如果表現不符合預期,前端工程師在沒有日志的情況下,很難。所以就需要針對必要的步驟記錄日志,并上傳。只能在回調函數中被調用。事物關閉日志對象。處理異常利用的重建因為只能在中調用。 問題 頁面如果表現不符合預期,前端工程師在沒有 javascript 日志的情況下,很難 debug。所以就需要針對必要的步驟記錄日志,并上傳。但是每記錄一條日志就上傳并不是一個合適的選擇,譬如如果生成...
閱讀 3952·2021-11-24 09:38
閱讀 1421·2021-11-19 09:40
閱讀 2778·2021-11-18 10:02
閱讀 3691·2021-11-09 09:46
閱讀 1765·2021-09-22 15:27
閱讀 3110·2019-08-29 15:24
閱讀 997·2019-08-29 12:40
閱讀 1683·2019-08-28 18:24