成果展现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>indexedDB</title></head><style> fieldset { margin-top: 50px; padding: 30px; }</style><body> <h3>indexedDB web数据库 增删改查</h3> <div id="app"> <fieldset> <button onclick="ctr('create')">增加</button> <input id="addInput" type="text"> </fieldset> <fieldset> <button onclick="ctr('retrieve')">查找</button> <input id="findInput" type="text"> <span id="viewFindResult"></span> </fieldset> <fieldset> <button onclick="ctr('update')">更新</button> <input id="updateInput" type="text"> </fieldset> <fieldset> <button onclick="ctr('delete')">删除</button> <input id="delInput" type="text"> </fieldset> <fieldset> <button onclick="ctr('clear')">清空</button> </fieldset> <div> <!-- <ol> <li><button></button></li> </ol> --> <ul id="list">暂无数据</ul> </div> </div>~~~~ <script> let db, version = 1 const addInputEle = document.getElementById("addInput"); const updateInputEle = document.getElementById("updateInput"); const delInputEle = document.getElementById("delInput"); const findInputEle = document.getElementById("findInput"); const viewFindResultEle = document.getElementById("viewFindResult"); const listEle = document.getElementById("list"); const request = indexedDB.open("user", version); //监听数据库谬误 request.onerror = function (e) { console.log("onerror", e); } //监听数据库更新 request.onupgradeneeded = function (e) { console.log("onupgradeneeded", e); db = e.target.result; var transaction = event.target.transaction if (!db.objectStoreNames.contains("users")) { const objectStore = db.createObjectStore("users", { keyPath: "username" }); objectStore.createIndex('age', 'age', { unique: true });; objectStore.createIndex('fullName', 'fullName', { unique: false });; } } //监听数据库连贯胜利 request.onsuccess = function (e) { console.log("onsuccess", e); db = e.target.result; objectStore = db.transaction(['users'], 'readwrite') .objectStore('users'); viewAll(objectStore) } //操作数据库 function ctr(method) { if (!db) { alert("数据库连贯中") } objectStore = db.transaction(['users'], 'readwrite') .objectStore('users'); switch (method) { case "create": createData(objectStore); break; case "retrieve": retrieveData(objectStore); break; case "update": updateData(objectStore); break; case "delete": deleteData(objectStore); break; case "clear": clearData(objectStore); break; } } //新增数据 function createData(objectStore) { const username = addInputEle.value; if (!username) { alert("input为空") return; } const req = objectStore .add({ username, age: parseInt(Math.random() * 10000000) + "", fullName: 1 }); req.onsuccess = function (e) { console.log('数据新增胜利', e); viewAll(objectStore); }; req.onerror = function (e) { console.log('数据新增失败', e); } } //检索数据 function retrieveData(objectStore) { const username = findInputEle.value; if (!username) { alert("input为空") return; } const req = objectStore.index("age") .get(username); req.onsuccess = function (e) { viewFindResultEle.innerText = e.target.result ? JSON.stringify(e.target.result) : "无此条记录"; console.log('数据检索胜利', e); }; req.onerror = function (e) { console.log('数据检索失败', e); } } //更新数据 function updateData(objectStore) { const username = updateInputEle.value; if (!username) { alert("input为空") return; } const req = objectStore .put({ username, age: 9999999999 }); req.onsuccess = function (e) { console.log('数据更新胜利', e); viewAll(objectStore) }; req.onerror = function (e) { console.log('数据更新失败', e); } } //删除数据 function deleteData(objectStore) { const username = delInputEle.value; if (!username) { alert("input为空") return; } const req = objectStore .delete(username); req.onsuccess = function (e) { console.log('数据删除胜利', e); viewAll(objectStore) }; req.onerror = function (e) { console.log('数据删除失败', e); } } //清空数据 function clearData(objectStore) { const req = objectStore .clear(); req.onsuccess = function (e) { console.log('数据清空胜利', e); viewAll(objectStore) }; req.onerror = function (e) { console.log('数据清空失败', e); } } //展现所有数据 function viewAll(objectStore) { listEle.innerHTML = null; var flag = 0; objectStore.openCursor().onsuccess = function (e) { console.log("数据列表", e); const liEle = document.createElement("li"); var cursor = e.target.result; if (cursor) { flag++; liEle.innerText = JSON.stringify(cursor.value); listEle.appendChild(liEle); cursor.continue(); } else { if (flag == 0) { listEle.innerText = "暂无数据"; } else { flag = 0; } } }; } </script></body></html>