Wrapper for IndexedDB JsStore - Database version iteration

        JsStore is a wrapper around IndexedDB. It provides simple SQL like api, which is easy to learn and use.   

         IndexedDb queries can be executed inside the web worker, JsStore keeps this functionality by providing a separate worker file.

        So queries can be executed in two ways - inside the web worker or outside the web worker. It is recommended to use a web worker as it runs the script in a background thread.

       The Indexed we used in the previous articles is a related function api. It is difficult to realize some functions, but it will be more convenient after using JsStore. In addition, in JsSotre, it is more convenient to update the database model; that is to say, if you define the table field type at the beginning, or need to add new fields, etc., you can update it through alter.

1. Database model update

        The database schema can be accessed via:

• Increment the version in a database object
• Define what you want to change in the alter field of the table.

       Here we use the data record table defined in the basic grammar of JsStore to demonstrate the database model update paradigm. If you don't understand the previous chapter, you can click the following link to view it: IndexedDB wrapper JsStore - Basic Grammar_Awakening Mage's Blog-CSDN Blog

1.1 Create a database connection

        code show as below:

import { Connection } from "jsstore";
import workerInjector from "jsstore/dist/worker_injector";
 
let connection = new Connection();
connection.addPlugin(workerInjector);
 
export default connection;

1.2 Define and initialize the database model

        code show as below:

import connection from './index.js';
import { DATA_TYPE } from "jsstore";
 
const getDatabase = () => {
	//用户表
	const UserTable = {
		name: "Users",
		columns: {
			id: { primaryKey: true, autoIncrement: true },
			username: { notNull: true, dataType: DATA_TYPE.String },
			password: { notNull: true, dataType: DATA_TYPE.String },
			role: { notNull: true, dataType: DATA_TYPE.Number },
			token: { notNull: false, dataType: DATA_TYPE.String },
			createtime: { notNull: true, dataType: DATA_TYPE.DateTime },
			updatetime: { notNull: true, dataType: DATA_TYPE.DateTime },
		}
	}
	
	//岗位管理
	const PostTable = {
		name: "Post",
		columns: {
			id: { primaryKey: true, autoIncrement: true },
			name: { notNull: true, dataType: DATA_TYPE.String },
			remark: { notNull: false, dataType: DATA_TYPE.String },
			createtime: { notNull: true, dataType: DATA_TYPE.DateTime },
			updatetime: { notNull: true, dataType: DATA_TYPE.DateTime },
		}
	}
	
	const dataBase = {
			name: "demo_manage",
			tables: [UserTable, PostTable],
			version: 1
	};
	return dataBase;
}
 
export const initJsStore = async () => {
	const dataBase = await getDatabase();
	return await connection.initDb(dataBase);
}

1.3 Update model parameters

name	describe
modify	Modify the corresponding field attribute or data type
add	add new field
drop	Delete the specified field

        IndexedDb is a browser database technology, which means that if you make some changes in your web application, anyone using your web application should get the latest changes, including database changes.

        When indexedb is initialized, the db version is greater than the current db version, the browser decides to change the db schema.

        At this point, we can update and iterate the database model through alter.

1.4 Update field attributes and data types

        For the role in the user table Users, we need to change it to optional, and change the data type to String; in addition, the current version is 1, to make it effective, we need to change the version to 2; the code is as follows:

//用户表
const UserTable = {
	name: "Users",
	columns: {
		id: { primaryKey: true, autoIncrement: true },
		username: { notNull: true, dataType: DATA_TYPE.String },
		password: { notNull: true, dataType: DATA_TYPE.String },
		role: { notNull: true, dataType: DATA_TYPE.Number },
		token: { notNull: false, dataType: DATA_TYPE.String },
		createtime: { notNull: true, dataType: DATA_TYPE.DateTime },
		updatetime: { notNull: true, dataType: DATA_TYPE.DateTime },
	},
	alter: {
		2: {
			modify: {
              role: { notNull: false, dataType: DATA_TYPE.String }
            }
		}
	}
}

const dataBase = {
		name: "demo_manage",
		tables: [UserTable],
		version: 2
};

1.5 New fields

        In the user table Users, we need to record the user's login time. Since the previous example version is 2, the version needs to be changed to 3 at this time. The code is as follows:

//用户表
const UserTable = {
	name: "Users",
	columns: {
		id: { primaryKey: true, autoIncrement: true },
		username: { notNull: true, dataType: DATA_TYPE.String },
		password: { notNull: true, dataType: DATA_TYPE.String },
		role: { notNull: true, dataType: DATA_TYPE.Number },
		token: { notNull: false, dataType: DATA_TYPE.String },
		createtime: { notNull: true, dataType: DATA_TYPE.DateTime },
		updatetime: { notNull: true, dataType: DATA_TYPE.DateTime },
	},
	alter: {
		2: {
			modify: {
				role: { notNull: false, dataType: DATA_TYPE.String }
			}
		},
		3: {
			add: {
				logintime: { notNull: false, dataType: DATA_TYPE.DateTime }
			}
		}
	}
}


const dataBase = {
	name: "demo_manage",
	tables: [UserTable],
	version: 3
};

        After the code is executed, as shown in the figure below, the logintime field is added to the data table.

 1.6 Delete fields

        In the user table Users, if you do not need to update the time, add and delete the updatetime field in the version number 4, the code is as follows:

//用户表
const UserTable = {
	name: "Users",
	columns: {
		id: { primaryKey: true, autoIncrement: true },
		username: { notNull: true, dataType: DATA_TYPE.String },
		password: { notNull: true, dataType: DATA_TYPE.String },
		role: { notNull: true, dataType: DATA_TYPE.Number },
		token: { notNull: false, dataType: DATA_TYPE.String },
		createtime: { notNull: true, dataType: DATA_TYPE.DateTime },
		updatetime: { notNull: true, dataType: DATA_TYPE.DateTime },
	},
	alter: {
		2: {
			modify: {
				role: { notNull: false, dataType: DATA_TYPE.String }
			}
		},
		3: {
			add: {
				logintime: { notNull: false, dataType: DATA_TYPE.DateTime }
			}
		},
		4: {
			drop: {
				updatetime: {  }
			}
		}
	}
}


const dataBase = {
	name: "demo_manage",
	tables: [UserTable],
	version: 4
};

        After the code is executed, as shown in the figure below, the updatetime field does not exist.

Second, delete the database record table

        dropDb is used to drop the current database from browser storage. code show as below:

connection.dropDb().then(function() {
    console.log('Db deleted successfully');
}).catch(function(error) {
    console.log(error);
});;

3. Close the database connection

        Terminate closes the connection and releases everything. code show as below:

await connection.terminate();
console.log("connection terminated");

        But when you want to restart the connection, you must create the connection again and re-execute new Connection().