VUE+前端数据存储indexDB

背景

最近项目中基于需求限制需要使用mineMap地图绘制路段，路段数据有3万+条（大概27.6M），前后端请求一次耗时38s，这么长的基础数据请求时间对任何一个项目来说都是无法接受的。基于此前后端做了以下操作以期解决这个问题：

后端清除不需要的返回字段，处理后数据大小降至18.6M，请求时间缩短至28s
前端寻求浏览器存储大量数据的方案只在第一次打开页面时请求，后续均从浏览器存储中获取数据（indexDB）
路段数据由基础路段和虚拟路段组成，虚拟路段可能会变化，沟通此处需求是否可以变更为只渲染不变的基础路段数据，这样方案可以变更为前端项目里直接请求本地json文件即可，不再需要请求后端

虽然最后不再采用indexDB存储，但是还是记录下vue中使用indexDB的相关代码

indexDB

IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。

indexDB操作步骤如下：

打开/创建数据库（如果没有就会创建）。
首次创建则在数据库中创建一个对象仓库（也就是建一个表）。
数据库操作（增删改查等）

代码如下

全局定义几个变量：

let indexDB
let db
let objectStore

数据库操作(created里)：

        const that this        // 创建indexDB内存数据库，存储基础路段数据indexDB = window.indexedDB.open('sectionsData')// 数据库首次创建版本，或者window.indexedDB.open传递的新版本（版本数值要比现在的高）indexDB.onupgradeneeded = function (event) {db = event.target.resultif (!db.objectStoreNames.contains('sections')) {objectStore = db.createObjectStore('sections', { keyPath: 'sectionCode' })//        定义主键，相当于idobjectStore.createIndex('sectionCode', 'sectionCode', { unique: true })objectStore.createIndex('flow', 'flow', { unique: false })objectStore.createIndex('trafficStatus', 'trafficStatus', { unique: false })objectStore.createIndex('coordinates', 'coordinates', { unique: false })}}// 数据库成功打开indexDB.onsuccess = function (event) {//获取db容器db = indexDB.result//判断是否有值--objectStore数据存储仓库（表）objectStore = db.transaction('sections', 'readwrite').objectStore('sections')//此处根据里面是否有sectionCode=0的数据来判断是否已存储路段数据let request = objectStore.get(0)request.onsuccess = function (event) {if (request.result) {let allRecords = objectStore.getAll()allRecords.onsuccess = function () {//拿到所有路段数据，进行需要的操作console.log(allRecords.result)}} else {//如果表中无数据则走接口请求逻辑getRoadData().then(res => {const data = res.datadata.forEach((item, index) => {//数据入表that.add({sectionCode: item.sectionCode,flow: item.flow || 1000,trafficStatus: item.trafficStatus || 1,coordinates: JSON.stringify(coordinates)})})that.add({ sectionCode: 0 })})}}}

add方法：

add(item) {const objectStore = db.transaction(['sections'], 'readwrite').objectStore('sections')objectStore.add(item)},

VUE+前端数据存储indexDB相关推荐

前端战五渣学JavaScript——前端数据存储
说起前端数据存储,那就不得不提到Cookie.sessionStorage和localStorage,这是我们接触到的最熟悉的前端数据存储的单词,作为一个前端开发.前端工程师,这三个单词用没用过先不管 ...
vue 前端本地存储搜索历史记录，删除某条记录，清空记录
vue 前端本地保存搜索历史,localStorage 一.保存历史的数组是由元素组成: [ "000004 SZ"] 在页面第一次加载的时候,从localStorage中获取历史 ...
Web前端数据存储—cookie机制（设置，获取，删除cookie）
今天看到cookie机制就来记录一下,我们前端一般存储cookie都是在登录的时候进行的,两种,选一个就行(其实都一样,只不过一个明细化了). 我们先了解一下 cookie: HTTPCookie,通 ...
几种前端数据存储方式（记录）
1. cookie cookie生成cookie是存在客户端,session存在服务器端.在cookie当用户第一次访问网页时,服务器会给客户端返回一个cookie,在cookie中保存着服务器端se ...
Vue 前端数据大屏适配
逻辑分析: 采用了css3的缩放transform: scale(X)属性,我们不难发现本人改变分辨率时,scale的值是变化的.前端小伙们们看到这,想必也已经明白了大概. 我们只要监听浏览器窗口大的 ...
jq选择器常用方法总结 data数据存储
dom选择器$符号起步参数形式如css即可进一步选择元素相关方法: .get() 在你选取的标签之中获取指定的那个索引选取或者属性选取并且该元素是原生dom 数组形式,故无法实现链式调用 . ...
魔方APP项目-07-客户端提交登录信息、在APICloud中集成防水墙验证码，前端获取显示并校验验证码、服务端校验验证码、保存用户登录状态，APICloud提供的数据存储、客户端保存用户登陆数据
用户登录一.客户端提交登录信息 html/login.html,代码: <!DOCTYPE html> <html> <head><title>登录& ...
vue项目持久化存储数据的实现代码
方式一.使用localStorage在数据存储 1.要在浏览器刷新的时候重新存储起来 if (window.localStorage.getItem(authToken)) { store.commi ...
前端图片有时候能显示有时候不显示_web前端基础教程：两种数据存储思路
Web前端开发基础,Web前端基础教程数据存储是数据流在加工过程中产生的临时文件或加工过程中需要查找的信息.数据以某种格式记录在计算机内部或外部存储介质上.数据存储要命名,这种命名要反映信息特征的组 ...

VUE+前端数据存储indexDB

背景

indexDB

代码如下

VUE+前端数据存储indexDB相关推荐

最新文章

热门文章