浏览器数据库IndexedDB初体验

最近在项目中尝试使用了一下IndexedDB，这篇仅仅是记录一下IndexedDB简单使用，详情可以查看阮大神的文章。

业务场景：用户与其他人的聊天数据，我们用的是环信，没有使用环信历史消息API，而是采用indexDB把数据缓存到本地。

Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同）。 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB。而且IndexedDB是异步的，不会阻塞页面渲染。故采用IndexedDB。

使用代码如下（代码是在vue中的写法）：

//进入页面时 mounted中let _this = this;//用时间戳作为版本号 这样每次进入都可以触发onupgradeneededlet version = +new Date()//打开 messages 数据库 没有会去创建var request = window.indexedDB.open('messages', version)request.onsuccess = function(event) {let db = request.result_this.db = db//每次打开成功后获取对应人员的聊天数据_this.readData(staffUuid)console.log('数据库打开成功:', db)}request.onupgradeneeded = function(event) {console.log('upgrade')let db = event.target.resultvar objectStore//没有对象仓库时 创建对象仓库if (!db.objectStoreNames.contains('messages')) {//以id作为主键objectStore = db.createObjectStore('messages', { keyPath: 'id' })}_this.db = db}

//添加数据addData(data) {var transaction = this.db.transaction(['messages'], 'readwrite')transaction.oncomplete = function(event) {console.log('transaction success')}transaction.onerror = function(event) {console.log('transaction error: ' + transaction.error)}var objectStore = transaction.objectStore('messages')objectStore.put(data)},//读取数据readData(key) {let _this = thisvar transaction = this.db.transaction(['messages'])var objectStore = transaction.objectStore('messages')var request = objectStore.get(key)request.onerror = function(event) {console.log('事务失败')}request.onsuccess = function(event) {if (request.result) {const { value } = request.result_this.messages = JSON.parse(value)console.log(value, '消息数据获取成功')} else {_this.messages = []console.log('未获得数据记录')}}}

//发送消息成功时或者离开聊天页面调用添加数据
//以对方的id作为数据id
let data = {id: this.to_id,value: JSON.stringify(this.messages)
}
this.addData(data)

浏览器数据库IndexedDB初体验相关推荐

一行代码，搞定浏览器数据库 IndexedDB
作者 | 星尘starx 来源 | https://juejin.cn/post/6918705632757415950 前言 2021 年,如果你的前端应用,需要在浏览器上保存数据,有三个主流方案可 ...
indexed true mysql_一行代码，搞定浏览器数据库 IndexedDB
前言 2021 年,如果你的前端应用,需要在浏览器上保存数据,有三个主流方案可以选择: Cookie:上古时代就已存在,但能应用的业务场景非常有限 LocalStorage:使用简单灵活,但是容量只有 ...
浏览器数据库 IndexedDB
浏览器数据库 IndexedDB 随着浏览器的功能不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少从服务器获取数据,直接从本地获取数据. 现有的浏览器数据储存方案,都不适合储存大 ...
浏览器数据库IndexedDB
概述随着浏览器的功能不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少从服务器获取数据,直接从本地获取数据. Cookie 的大小不超过4KB,且每次请求都会发送回服务器: Lo ...
腾讯云数据库 TDSQL-之初体验
目录一.简介二.创建和使用TDSQL 1.登录TDSQL控制台 ,在实例列表,单击新建,进入购买页. 2.对数据库进行管理,点击管理 3.创建帐号 4. 在弹出的对话框,输入帐号名.密码.备注,确 ...
浏览器数据库IndexedDB介绍
摘要在移动端H5页面开发的时候,为了更好的提高用户体验,可以对不常变化的数据做浏览器端数据缓存,在用户打开页面的时候,首先加载本地的数据,然后异步请求服务端,更新数据.在移动端webview中,可以 ...
浏览器数据库 IndexedDB（一）概述
IndexedDB 就是浏览器提供的本地数据库,它可以被网页脚本创建和操作. 背景随着浏览器的功能不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少从服务器获取数据,直接从本地获 ...
浏览器数据库 IndexedDB 介绍
在讲IndexedDB之前,先简单说说cookie.localStorage.sessionStorage. cookie Cookie 的大小不超过4KB,且每次请求都会发送回服务器. localS ...
Cassandra数据库之初体验
什么是Cassandra? 当您需要可伸缩性和高可用性而不影响性能时,Apache Cassandra数据库是正确的选择.线性可扩展性和在商用硬件或云基础架构上经过验证的容错能力使它成为关键任务数据 ...

浏览器数据库IndexedDB初体验

浏览器数据库IndexedDB初体验相关推荐

最新文章

热门文章