前端存储IndexedDB存储方式实战案例
IndexDB数据库的增删改查案例：
模拟2024年总统大选，民主党拜登、哈里斯和共和党川普总统竞选
-
数据库：
indexedDB.open("admin", version); request.onsuccess = (event) => {db = event.target.result; }; -
对象存储：db.createObjectStore("users", { keyPath: "username" });
-
事务：let transaction = db.transaction("users");
-
插入对象：request = store.add(user);
-
通过游标查询：request = store.openCursor();
-
键范围：
const onlyRange = IDBKeyRange.only("007"); // 从"007"记录开始，直到最后 const lowerRange = IDBKeyRange.lowerBound("007"); // 从"007"的下一条记录开始，直到最后 const lowerRange = IDBKeyRange.lowerBound("007", true); // 从头开始，到"ace"记录为止 const upperRange = IDBKeyRange.upperBound("ace"); // 从头开始，到"ace"的前一条记录为止 const upperRange = IDBKeyRange.upperBound("ace", true); // 从"007"记录开始，到"ace"记录停止 const boundRange = IDBKeyRange.bound("007", "ace"); // 从"007"的下一条记录开始，到"ace"记录停止 const boundRange = IDBKeyRange.bound("007", "ace", true); // 从"007"的下一条记录开始，到"ace"的前一条记录停止 const boundRange = IDBKeyRange.bound("007", "ace", true, true); // 从"007"记录开始，到"ace"的前一条记录停止 const boundRange = IDBKeyRange.bound("007", "ace", false, true); const store = db.transaction("users").objectStore("users"), range = IDBKeyRange.bound("007", "ace"); request = store.openCursor(range); request.onsuccess = function(event){ const cursor = event.target.result; if (cursor) { // 永远要检查console.log(`Key: ${cursor.key}, Value: ${JSON.stringify(cursor.value)}`); cursor.continue(); // 移动到下一条记录} else { console.log("Done!"); } }; -
设置游标方向：
const transaction = db.transaction("users"), store = transaction.objectStore("users"), request = store.openCursor(null, "nextunique"); const transaction = db.transaction("users"), store = transaction.objectStore("users"), request = store.openCursor(null, "prevunique"); -
索引：
index = store.createIndex("username", "username", { unique: true }); index = store.index("username"); index = store.index("username"), request = index.openCursor(); const transaction = db.transaction("users"), store = transaction.objectStore("users"), index = store.index("username"), request = index.openKeyCursor(); request.onsuccess = (event) => { // 处理成功// event.result.key 是索引键，event.result.value 是主键 };const transaction = db.transaction("users"), store = transaction.objectStore("users"), index = store.index("username"), request = index.get("007"); request.onsuccess = (event) => { // 处理成功 }; request.onerror = (event) => { // 处理错误 };const transaction = db.transaction("users"), store = transaction.objectStore("users"), index = store.index("username"), request = index.getKey("007"); request.onsuccess = (event) => { // 处理成功// event.target.result.key 是索引键，event.target.result.value 是主键 }; const transaction = db.transaction("users"), store = transaction.objectStore("users"), indexNames = store.indexNames for (let indexName in indexNames) { const index = store.index(indexName); console.log(`Index name: ${index.name} KeyPath: ${index.keyPath} Unique: ${index.unique}`); } -
并发问题：database.onversionchange = () => database.close();
-
限制：IndexedDB 的很多限制实际上与 Web Storage 一样。首先，IndexedDB 数据库是与页面源（协议、域 和端口）绑定的，因此信息不能跨域共享。这意味着 www.wrox.com 和 p2p.wrox.com 会对应不同的数据 存储。 其次，每个源都有可以存储的空间限制。当前 Firefox 的限制是每个源 50MB，而 Chrome 是 5MB。 移动版 Firefox 有 5MB 限制，如果用度超出配额则会请求用户许可。 Firefox 还有一个限制——本地文本不能访问 IndexedDB 数据库。Chrome 没有这个限制。因此在本 地运行本书示例时，要使用 Chrome
增删改查小案例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>IndexedDB数据库的怎、删、改、查实战</title>
</head><body><div class="main">用户名：<span id="username"></span>密码：<span id="password"></span></div><script>let user = {id: 0,username: "Joseph Robinette Biden Jr.",firstname: "joseph",lastname: "biden",password: "123456"};let user1 = {id: 1,username: "Donald Trump",firstname: "donaid",lastname: "trump",password: "boo",}let user2 = {id: 2,username: "kamala harris",firstname: "kamala",lastname: "harris",password: "456789"}const ele_username = document.querySelector("#username")const ele_password = document.querySelector("#password")ele_username.textContent = user.username;ele_password.textContent = user.password;//打开数据库（如果数据库不存在则创建）const dbName = "userDB";const version = 1;const request = indexedDB.open(dbName, version);//在版本升级时创建对象存储request.onupgradeneeded = function (event) {console.log(event);const db = event.target.result;if (!db.objectStoreNames.contains('users')) {db.createObjectStore('users', { keyPath: "id" })}}//等待数据库连接成功request.onsuccess = function (event) {const db = event.target.result;//使用indexedDB进行增删改查操作console.log('成功连接数据库的回调方法',event);//新增function addUser(user) {const transaction = db.transaction(['users'], 'readwrite');const store = transaction.objectStore('users');store.add(user);transaction.oncomplete = function (event) {console.log("user added", user.username);};transaction.onerror = function (event) {console.log("Error adding user:", event.target.errorCode);}}//删除function deleteUser(id) {const transaction = db.transaction(['users'], 'readwrite');const store = transaction.objectStore('users');store.delete(id);transaction.oncomplete = function (event) {console.log("user deleted:", id);}transaction.onerror = function (event) {console.log("Error deleting user:", event.target.errorCode);}}//修改function updateUser(newUser) {const transaction = db.transaction(['users'], 'readwrite');const store = transaction.objectStore('users');//获取旧的对象const request = store.get(newUser.id);request.onsuccess = function (event) {const oldUser = event.target.result;console.log('旧数据是：',oldUser);debuggerif (oldUser) {//修改对象oldUser.id = newUser.id;oldUser.username=newUser.username;oldUser.firstname = newUser.firstname;oldUser.lastname = newUser.lastname;oldUser.password = newUser.password;//将修改后的对象放回存储store.put(oldUser);transaction.oncomplete = function (event) {console.log("User updated", newUser.id);}} else {console.log('User not found for update:', newUser.id);}};transaction.onerror = function (event) {console.log("Error updating user:", event.target.errorCode);}}//查询function getUser(id) {const transaction = db.transaction(["users"], 'readwrite');const store = transaction.objectStore('users');const request = store.get(id)request.onsuccess = function (event) {const user = event.target.result;if (user) {console.log("User retrieved:", user);return user;} else {console.log('User not found:', id);return {};}};transaction.onerror = function (event) {console.log("Error retrieving user:", event.target.errorCode);}}//调用增删改查addUser(user)// debuggeraddUser(user1)// debuggeraddUser(user2)const updatedUser2 = {id: 0,username: "Kamala Devi Harris",firstname: "kamala",lastname: "harris",password: "foo",}// debuggerupdateUser(updatedUser2)// debuggerdeleteUser(2)// debuggerconst suser1 = getUser(0)const suser2 = getUser(1)const suser3=getUser(2)console.log(suser1)console.log(suser2)console.log(suser3);}request.onerror = function (event) {console.log("DataBase error:", event.target.errorCode);}</script>
</body></html>qq:1620016116