ToB企服应用市场:ToB评测及商务社交产业平台

标题: 解锁Web数据存储：欣赏器数据库 IndexedDB [打印本页]

---

作者: 民工心事    时间: 前天 19:55
标题: 解锁Web数据存储：欣赏器数据库 IndexedDB
1、欣赏器数据存储

欣赏器中的数据存储，日常接触较多的有Cookie、SessionStorage、LocalStorage，接下来引入一个重头嘉宾：IndexedDB；下面看它们四个在生命周期、存储大小、存储形式上的对比：
Cookie

• [ 生命周期 ] 由服务器生成，可以设置过期时间；过期后由欣赏器自动扫除；
  
• [ 存储空间 ] 4KB
  
• [ 数据形式 ] 以字符串键值对的形式存储数据；
  
• [ 配置项 ]
  

Expires/Max-Age	过期时间
Path	有效路径，/表示对当前网站所有路径有效
Domain	有效域名)
HttpOnly	配置后只答应http访问，不答应js访问
Secure	只会在https中发送

SessionStorage

• [ 生命周期 ] 客户端主动存储；仅在当前页面存在时见效，页面关闭后不会保留数据；
  
• [ 存储空间 ] 5MB
  
• [ 数据形式 ] 以字符串键值对的形式存储数据
  

LocalStorage

• [ 生命周期 ] 客户端主动存储；除非手动扫除，否则一直存在；
  
• [ 存储空间 ] 5MB
  
• [ 数据形式 ] 以字符串键值对的形式存储数据
  

2、IndexedDB

IndexedDB 是一种在欣赏器中存储大量结构化数据的数据库
特点

• 存储容量大：
  
  
  
  • 相比 LocalStorage 和 SessionStorage ，IndexedDB 提供了更大的存储容量，通常在几百 MB 到 GB 级，具体取决于欣赏器和设备。这使得它可以存储大量数据，例如可以存储整个应用程序的数据，包括离线数据、多媒体文件等。
    
  
  
• 异步操作：
  
  
  
  • IndexedDB 的操作是异步的，不会壅闭主线程，这对于性能至关重要，尤其是在存储和检索大量数据时。它利用事件和回调机制，确保在执行长时间操作时不会影响用户界面的响应性。例如，利用 IndexedDB 存储数据时，不会导致页面冻结，由于操作是在后台举行的。
    
  
  

利用步调

MDN对于IndexedDB的利用指南：IndexedDB - Web API | MDN
1、打开数据库，调用indexedDB.open()

1. // 打开我们的数据库
2. // @param {string} --数据库名称
3. // @param {number} --数据库版本号
4. const request = window.indexedDB.open("MyTestDatabase", 1);
5. let db;
7. // 打开MyTestDatabase数据库失败时触发
8. request.onerror = function(event) {
9.     console.error('Error opening IndexedDB:', event.target.errorCode);
10. };
12. // 打开MyTestDatabase数据库成功时触发
13. request.onsuccess = function(event) {
14.     console.log('IndexedDB 打开成功');
15.     db = event.target.result;
16. };

复制代码

• 如果数据库不存在，open 操作会创建该数据库，然后触发 onupgradeneeded 事件，你需要在该事件的处理器中创建数据库模式。
  
• 如果数据库已经存在，但你指定了一个更高的数据库版本，会直接触发 onupgradeneeded 事件，答应你在处理器中更新数据库模式。
  
• 不能利用浮点数，否则它将会被转换成不超过它的最近整数，这大概导致事务无法启动，upgradeneeded 事件也不会被触发。
  

2、在数据库中创建对象存储（object store），利用createObjectStore来创建对象存储

1. // createObjectStore函数
2. // @param {string} --对象存储的名称
3. // @param {object} --其中keyPath定义的是主键
5. request.onupgradeneeded = function(event) {
6.     db = event.target.result;
7.     if (!db.objectStoreNames.contains('UserStore')) {
8.         db.createObjectStore('UserStore', { keyPath: 'userId' });
9.     }
10. };

复制代码

onupgradeneeded 事件的触发机遇

• 初次创建数据库：当利用 indexedDB.open() 方法打开一个不存在的数据库时，会触发 onupgradeneeded 事件，以便在数据库创建时举行初始化操作，如创建对象存储、界说索引等。
  
• 版本号更新：如果已经存在的数据库的版本号与 indexedDB.open() 方法中指定的版本号不一致，也会触发 onupgradeneeded 事件。这通常用于对数据库结构举行升级，例如添加新的对象存储、修改索引或删除不必要的对象存储等。
  

3、启动事务，来执行一些数据库操作，如添加或获取数据等
「 3-1 新增数据 」

1. // transaction函数
2. // @param {string[]} --想要访问的对象存储的数组
3. // @param {readonly | readwrite } --事务模式
5. // 调用 add函数
6. function cacheUserData(userId, saveData) {
7.     // 创建一个涉及userdata对象存储的读写事务
8.     const transaction = db.transaction(['UserStore'], 'readwrite');
9.     // 获取userdata对象存储，为后续对该对象存储的数据操作做铺垫
10.     const store = transaction.objectStore('UserStore');
11.     // 对userdata对象存储进行数据添加
12.     const request = store.add({ userId, saveData });
13.    
14.     // 执行成功
15.     request.onsuccess = function(event) {
16.         console.log('UserStore cached successfully:', userId);
17.     };
18.    
19.     // 执行失败
20.     request.onerror = function(event) {
21.         console.error('Error caching Data:', event.target.error);
22.     };
23. }
25. // 添加数据
26. const mydata = {
27.   name: '昔冰',
28.   age: 18,
29.   gender: '男',
30.   address: '河北省衡水市'
31. }
32. cacheUserData(Date.now(), mydata)

复制代码

「 3-2 删除数据 」

1. // 调用 delete函数
2. function deleteUserData(userId){
3.     if (!userId) return alert('参数错误')
4.     const transaction =db.transaction(['UserStore'],'readwrite')
5.     const store=transaction.objectStore('UserStore')
6.     const request=store.delete(userId)
7.     request.onsuccess = function(event) {
8.         console.log("数据删除成功");
9.     };
10.     request.onerror = function(event) {
11.         console.error("数据删除失败", event.target);
12.     };
13. }

复制代码

「 3-3 查询数据 」

1. // 按id查询数据 get()
2. function queryUserDataById(userId) {
3.   if (!userId) return alert('参数错误')
4.   const transaction = db.transaction(['UserStore'], 'readonly')
5.   const store = transaction.objectStore('UserStore')
6.   const request = store.get(userId)
7.   console.log(userId)
8.   request.onsuccess = function (event) {
9.     if (event.target.result) console.log('获取到数据：：', event.target.result)
10.     else console.log('未找到数据')
11.   }
12.   request.onerror = function (event) {
13.     console.log('获取数据失败')
14.   }
15. }
17. // 查询所有数据 getAll()
18. function queryUserData() {
19.   const transaction = db.transaction(['UserStore'], 'readonly')
20.   const store = transaction.objectStore('UserStore')
21.   const data = []
22.   const request=store.getAll()
23.   request.onsuccess = function (event) {
24.     if (event.target.result) console.log('获取到数据：：', event.target.result)
25.     else console.log('未找到数据')
26.   }
27.   request.onerror = function (event) {
28.     console.log('获取数据失败')
29.   }
30. }

复制代码

「 3-4 更新数据 」

1. // 先调用 get函数来获取对应的数据，再通过 put函数来更新数据
2. function updateUserData(userId, newData = {}) {
3.   if (!userId) return alert('参数错误')
4.   const transaction = db.transaction(['UserStore'], 'readwrite')
5.   const store = transaction.objectStore('UserStore')
6.   const request = store.get(userId)
8.   request.onsuccess = function (event) {
9.     const data = event.target.result
10.     // 注意这里只对data更新了saveData数据，没有改变userId，如果变动了userId则无法更新成功
11.     Object.assign(data, { saveData: newData })
12.     const requestUpdate = store.put(data)
13.     requestUpdate.onerror = (event) => {
14.       console.log('数据更新错误')
15.     }
16.     requestUpdate.onsuccess = (event) => {
17.       console.log('数据更新成功')
18.     }
19.   }
20. }
22. // 绑定事件更新数据
23. const btnUpdateUser = document.querySelector('.update-user')
24. btnUpdateUser.addEventListener('click', () => {
25.   const newData = {
26.     address: '天津市和平区',
27.     age: 19,
28.     gender: '女',
29.     name: '王美丽'
30.   }
31.   updateUserData(1736924438112, newData)
32. })

复制代码

3、注意事项

数据库对象的赋值机遇

• onupgradeneeded事件只会在初次创建数据库的时间会执行，大概更新数据库版本的时间会执行，以是对于数据库对象db如果在onupgradeneeded中举行赋值，需要考虑的是onupgradeneeded大概由于数据库非首次创建或版本未更新导致不执行对应的事件函数，致使db不会被赋值，后续再通过db来调用api时会报错，比如：Cannot read properties of undefined (reading 'transaction')。
  
• 虽然数据库对象在onupgradeneeded的事件函数参数中可以获取到，但在数据库打开成功后的onsuccess事件函数参数中也可以获取到，而onsuccess会在每一次数据库成功打开后都会执行，以是可以将对db的赋值操作放置在onsuccess中。
  

数据修改操作

• 如果只利用autoIncrement : true，配置为主键自增，没有主键字段，在举行数据修改时，直接将数据对象传入会对这个新的数据举行新增而非修改。
  
• 配置autoIncrement : true后还需要再配置一个主键字段，这样后续添加数据时也不需要考虑主键字段的值，会在添加时自动添加；固然在修改时，可以根据主键字段来举行数据的更新。
  

1. // 创建对象存储时
2. db.createObjectStore('UserStore', { keyPath: 'userId', autoIncrement: true })
4. // 添加数据时
5. const addBtn = document.querySelector('.addUser')
6. addBtn.addEventListener('click', () => {
7.   // 创建一个事务，找对应的对象存储做对应的操作
8.   const transaction = db.transaction(['UserStore'], 'readwrite')
9.   // 获取具体你要操作的对象存储
10.   const store = transaction.objectStore('UserStore')
11.   // 新增数据
12.   const obj = {
13.     // 不需要配置userId及数据
14.     userData: {
15.       id: Date.now(),
16.       name: '昔冰',
17.       age: 18,
18.       address: '衡水市'
19.     }
20.   }
21.   // add方法，会返回一个执行对象，可以监听到成功或者失败
22.   const flag = store.add(obj)
23.   flag.onsuccess = function (event) {
24.     console.log('新增数据-成功！')
25.   }
26.   flag.onerror = function (event) {
27.     console.log('新增数据-失败！')
28.   }
29. })
31. // 修改数据时
32. const updateUserData(id)=>{
33.   // 创建一个事务，找对应的对象存储做对应的操作
34.   const transaction = db.transaction(['UserStore'], 'readwrite')
35.   // 获取具体你要操作的对象存储
36.   const store = transaction.objectStore('UserStore')
37.   // add方法，会返回一个执行对象，可以监听到成功或者失败
38.   const flag = store.get(1) // 主键为1，非索引！！！
39.   flag.onsuccess = function (event) {
40.     console.log('获取数据-成功！')
41.     // 获取到具体的数据
42.     const data = event.target.result
43.     data.userData.name = '爱喝水的人'
44.     // data中是有主键userId的，所以put时直接传入data就可以被数据库知道具体是修改的哪条数据
45.     const flag2 = store.put(data)
46.     flag2.onsuccess = function (event) {
47.       console.log('修改数据-成功！')
48.     }
49.     flag2.onerror = function (event) {
50.       console.error('修改数据-失败！')
51.     }
52.   }
53.   flag.onerror = function (event) {
54.     console.error('获取数据-失败！')
55.   }
56. }
57. const updateBtn = document.querySelector('.updateUser')
58. updateBtn.addEventListener('click',updateUserData(1))

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4