本文摘要：
本文做了基于浏览器数据库indexedDB的增删查改实例，详细的理论知识可以检察JavaScript教程（https://wangdoc.com/javascript/bom/indexeddb.html#indexeddb-%E5%AF%B9%E8%B1%A1）涉及到的方法1、打开数据库open2、新建数据库(如果打开的数据库不存在就会新建)3、删除数据库deleteDatabase4、新建表createObjectStore5、删除表deleteObjectStore6
本文做了基于浏览器数据库indexedDB的增删查改实例，详细的理论知识可以检察JavaScript教程（https://wangdoc.com/javascript/bom/indexeddb.html#indexeddb-%E5%AF%B9%E8%B1%A1）涉及到的方法1、打开数据库open2、新建数据库(如果打开的数据库不存在就会新建)3、删除数据库deleteDatabase4、新建表createObjectStore5、删除表deleteObjectStore6、新建记载add7、更新记载put8、删除记载delite9、查找记载get贴上截图：新建数据库、表、五条记载 修改记载 删除记载 查询记载 凭据索引查询记载贴上代码：<!DOCTYPE html><html> <head> <title> IndexedDB入门 </title> </head> <body> <div> <button onclick="createDateBase()">新建数据库和表</button> <button onclick="createRecord()">新建记载</button> <button onclick="updateRecord()">修改记载(id=1的张三名称改为李四)</button> <button onclick="deleteRecord()">删除记载(id=1)</button> <button onclick="queryRecordAll()">查询全部记载</button> <button onclick="queryRecord()">查询记载(id=1)</button> <button onclick="queryRecordByIndex()">凭据索引查询(name 张三2)</button> </div> <div id='content'> <p id='dateBase'></p> <p id='table'></p> <p id='record'></p> <table id="myTable" border="0" cellpadding="0" cellspacing="0"></table> </div> </body> <script type="text/javascript"> var db; var request; var objectStore; var cursor = 1; // 新建数据库 gmm function createDateBase () { window.indexedDB.deleteDatabase('gmm'); request = window.indexedDB.open('gmm', 1); request.onsuccess = function (event) { document.getElementById('dateBase').innerHTML = '数据库名称：gmm'; } // 新建表 zx // id name age email request.onupgradeneeded = function (event) { db = event.target.result; var objectStore; if (!db.objectStoreNames.contains('zx')) { objectStore = db.createObjectStore('zx', { keyPath: 'id' }); document.getElementById('table').innerHTML = '表名称：zx'; // 插入索引 name email objectStore.createIndex('name', 'name', { unique: false }); objectStore.createIndex('email', 'email', { unique: false }); } } } // 新建记载 add function createRecord () { objectStore = db.transaction(['zx'], 'readwrite').objectStore('zx'); let record = objectStore.add({ id: cursor, name: '张三' + cursor, age: 24, email: '456@qq.com' }); record.onsuccess = function (event) { document.getElementById('record').innerHTML = `数据${cursor}写入乐成!`; queryRecordAll() } record.onerror = function (event) { document.getElementById('record').innerHTML = '数据写入失败!'; } } // 修改记载 put function updateRecord () { objectStore = db.transaction(['zx'], 'readwrite').objectStore('zx'); let record = objectStore.put({ id: 1, name: '李四', age: 24, email: '456@qq.com' }); record.onsuccess = function (event) { document.getElementById('record').innerHTML = '数据更新乐成!'; queryRecordAll() } record.onerror = function (event) { document.getElementById('record').innerHTML = '数据更新失败!'; } } // 删除记载 delete function deleteRecord () { objectStore = db.transaction(['zx'], 'readwrite').objectStore('zx'); let record = objectStore.delete(1); record.onsuccess = function (event) { document.getElementById('record').innerHTML = '数据删除乐成!'; queryRecordAll() } record.onerror = function (event) { document.getElementById('record').innerHTML = '数据删除失败!'; } } // 查询记载 function queryRecord () { let table = db.transaction(['zx']).objectStore('zx'); let records = table.get(1); records.onsuccess = function (event) { if (records.result) { addTable(['id', 'name', 'age', 'email'], records.result) } else { document.getElementById('record').innerHTML = '未获取数据!'; addTable(['id', 'name', 'age', 'email'], []) } } records.onerror = function (event) { document.getElementById('record').innerHTML = '查询记载失败!'; } } // 查询全部 function queryRecordAll () { let table = db.transaction(['zx']).objectStore('zx'); let list = []; table.openCursor().onsuccess = function (event) { let s = event.target.result if (s) { list.push(s.value); s.continue(); } else { cursor = list.length + 1; if (list.length > 0) { addTable(['id', 'name', 'age', 'email'], list); } } } } // 凭据索引查找 function queryRecordByIndex () { let table = db.transaction(['zx']).objectStore('zx'); let index = table.index('name'); let record = index.get('张三2'); record.onsuccess = function (event) { if (event.target.result) { addTable(['id', 'name', 'age', 'email'], event.target.result) } else { document.getElementById('record').innerHTML = '未获取数据!'; addTable(['id', 'name', 'age', 'email'], []) } } record.onerror = function (event) { document.getElementById('record').innerHTML = '索引查询记载失败!'; } } // 动态生成表格 function addTable (head, body) { let table = document.getElementById('myTable'); if (document.getElementById('thead')) { table.removeChild(document.getElementById('thead')) } if (document.getElementById('tbody')) { table.removeChild(document.getElementById('tbody')) } if (JSON.stringify(body) === '[]') { return } let thead = document.createElement('thead'); let tbody = document.createElement('tbody'); thead.id = 'thead'; tbody.id = 'tbody'; table.appendChild(thead); table.appendChild(tbody); let tr = document.createElement('tr'); for (let i of head) { let td = document.createElement('td'); td.innerHTML = i; tr.appendChild(td); } thead.appendChild(tr); if (!Array.isArray(body)) { let tr = document.createElement('tr'); for (let i of head) { let td = document.createElement('td'); td.innerHTML = body[i]; tr.appendChild(td); } tbody.appendChild(tr); } else { for (let j of body) { let tr = document.createElement('tr'); for (let i of head) { let td = document.createElement('td'); td.innerHTML = j[i]; tr.appendChild(td); } tbody.appendChild(tr); } } document.getElementById('content').appendChild(table); } </script> <style> table { border-top: 1px solid #c3bebe; border-left: 1px solid #c3bebe; } td { border-right: 1px solid #c3bebe; border-bottom: 1px solid #c3bebe; width: 60px; } </style></html>总结1、一般需要获取数据的操作都有乐成和失败的事件，可以在内里获取数据并举行相关的操作(event.target.result)// 失败事件request.onerror = function (event) { console.log('报错');};// 乐成事件request.onsuccess = function (event) { console.log(event.target.result); console.log('乐成');};2、打开数据库关联了upgradeneeded事件，新建表和索引必须在这个内里操作// 指定的版本号，大于数据库的实际版本号，就会发生数据库升级事件upgradeneededrequest.onupgradeneeded = function (event) { db = event.target.result;}3、每次新建表时，都需要先判断再新建，以免发生错误4、新建表需要指定主键或默认自动生成主键(主键唯一性)；新建索引指定三个属性// autoIncrement：true （自动生成主键）var objectStore = db.createObjectStore('表名称', { keyPath: 'id' });var objectStore = db.createObjectStore('表名称', { autoIncrement: true });// unique：唯一性（true不能包罗相同的值）objectStore.createIndex('索引名字', '字段名', { unique: false });gitHub 代码 ：indexedDB-Demo（https://github.com/github-gmm/indexedDB-demo）参考文档：浏览器数据库 IndexedDB 入门教程 - 阮一峰（http://www.ruanyifeng.com/blog/2018/07/indexeddb.html）
本文关键词：hth华体会最新网站登录入口,浏览器,数据库,IndexedDB,增删,查改,实例,本文
本文来源：hth华体会最新网站登录入口-www.china-xha.com