Use of indexeddb database

Front end storage

Front end storage , It can make page interaction more friendly , Especially when saving drafts , It is very useful for users when the network is poor .

There are many storage methods for the front end , image Local storage、Session storage、IndexedDB、Web Sql、Cookies Wait for these kinds .

Use scenarios

We usually use local storage , Like basic user information , When multiple pages are needed , It can be stored locally during login , Just after the next exit , Login information can also be saved , This reduces the amount of user input .
however , It also has shortcomings , Its storage size is only 5M, It can only meet relatively small data storage , If it's a lot of data , It's unrealistic , Such as draft data .

Special scenes

Use in the company page app When , When the network situation is especially bad , As a result, these data cannot be submitted , If not stored , There will be no more next time , This makes users complain . therefore , I can only think about local storage , I thought of IndexedDB, But I haven't used it before , The company has not found any cases , I searched many articles and found that the code is very complex , So I gave up , First use local storage Use to try the effect , The effect is very good , But the storage space is not enough , Some data saved in two work orders is full , Cause the save to fail .
What I was thinking about was the strategy of saving the failure , Clear all or fail , But none of them meet the requirements .
therefore , We must do some research IndexedDB.

Off the shelf Library

The idea was to look for other people's cases ,github, But none of them is simple , complete case. Later, I changed my mind , I should find out if there is a mature Library , Everything comes to him who waits , Found a library ,dexie, Read the official website and github Of star, The documentation is perfect , as well as star The number of people reached 9K. And specifically for vue react And so on , So I started to use it .

advantage

1. It can store a lot of data
2. There are no strict data type restrictions
3. asynchronous
4. dexie library （index DB）

Code implementation

• Write a public db.ts, Used to define databases and tables

// db.ts
import Dexie, {
     Table } from 'dexie';

//  The form fills in the storage fields 
export interface FormData {
    
    id: string;
    scenesOne: string;
    scenesTwo: string;
    reasonClass: string;
    subReasonClass: string;
    reasonDesc: string;
    problemCell: string;
    customerFeedback: string;
    disapprovalReason: string;
    isUserOnsite: string;
    absenceReasons: string;
    additionalInfo: string;
    otherTips: string;
    otherAmount: string;
    nowTime: string;
    lng: string;
    lat: string;
    feePhotoArray: Array<any>;
    feeUrlStr: string;
    queueIploadFile: Array<any>;
}

//  Scenario development storage fields 
export interface PlanData {
    
    id: string;
    selectSolutionValue: string;
    solutionDesc: string;
    selectTimeValue: string;
}

//  One click test storage field 

export interface TestData {
    
    id: any;
    itemChecked: Array<any>;
    httpTestResult: Array<any>;
    httpTestInfo: object;
    httpTestStatus: number;
    phoneTestStatus: number;
    phoneTestResult: Array<any>;
    FtpTestStatus: number;
    ftpUploadTestResult: Array<any>;
    ftpTestDownResult: Array<any>;
    coverTestTime: number;
    coverTestStatus: number;
    netWorkType: string;
    adjacentList: Array<any>;
    currentTrack: Array<any>;
    selectLocation: string;
    selectDot: string;
}

//  Take pictures to store data 
export interface PhotoData {
    
    id: string;
    nowTime: string;
    address: string;
    getSignLng: number;
    getSignLat: number;
    outerImageArray: Array<any>;
    innerImageArray: Array<any>;
    otherImageArray: Array<any>;
    queueIploadFile: Array<any>;
}

export class MySubClassedDexie extends Dexie {
    
    formDB!: Table<FormData>;
    PlanDB!: Table<PlanData>;
    testDB!: Table<TestData>;
    photoDB!: Table<PhotoData>;

    constructor() {
    
        super('myDatabase');
        this.version(1).stores({
    
            formDB: 'id, scenesOne, scenesTwo, reasonClass, subReasonClass, reasonDesc, problemCell, customerFeedback, disapprovalReason, isUserOnsite, absenceReasons, additionalInfo, otherTips, otherAmount, nowTime, lng, lat, feePhotoArray, feeUrlStr',
            PlanDB: 'id, selectSolutionValue, solutionDesc, selectTimeValue',
            testDB: 'id, itemChecked, httpTestResult, httpTestInfo,httpTestStatus,phoneTestStatus,phoneTestResult,FtpTestStatus,ftpUploadTestResult,ftpTestDownResult,coverTestTime,coverTestStatus,netWorkType, adjacentList,currentTrack,selectLocation,selectDot',
            photoDB: 'id,nowTime,address,getSignLng,getSignLat,outerImageArray,innerImageArray,otherImageArray,queueIploadFile'
        });
    }
}

export const db = new MySubClassedDexie();

• Implement in component , Used to save local drafts

	private async openIDB() {
    
		const routerParam: any = this.$route.params;
		const id = routerParam.id || routerParam?.item[' Work order No '];
		//  Add data 
		const params = {
    
			id: id,
			selectSolutionValue: this.selectSolutionValue,
			solutionDesc: this.solutionDesc,
			selectTimeValue: this.selectTimeValue
		};
		const cur = await db.PlanDB.get(id);
		if (cur) {
    
			db.PlanDB.put(params);
		} else {
    
			db.PlanDB.add(params);
		}

		Toast.succeed(' Draft saved ');
	}

• When the data is submitted successfully , You need to delete the locally cached data

//  Clear cached data 
				db.PlanDB.get(id).then((item: any) => {
    
					if (item) {
    
						db.PlanDB.get(id).then((result: any) => {
    
							if (result.id) {
    
								db.PlanDB.delete(id);
							}
						});
					}
				});

• When entering the page , Get local cache data , Displayed on the page

private getLocalData() {
    
		const routerParam: any = this.$route.params;
		const id = routerParam.id || routerParam?.item[' Work order No '];
		db.PlanDB.get(id).then((res: any) => {
    
			if (res) {
    
				const data = res;
				this.solutionDesc = data.solutionDesc;
				this.selectSolutionValue = data.selectSolutionValue;
				this.selectTimeValue = data.selectTimeValue;
			}
		});
	}

Be careful ： Reading data 、 New data is asynchronous ,promise Packaged .
Project effect ：

Reference link ：
https://dexie.org/docs/Tutorial/Vue

Use it quickly .