db schema example to version - 4.2.1

Author: ujjwalguptaofficial

change-db-schema/index.html

@@ -19,7 +19,11 @@
         <div class="col-xs-12 col-sm-10 col-centered ">
             <div style="text-align:center;">
                 <button id="btnAddStudent" class="btn btn-success">
-                    <i class="fa fa-plus" aria-hidden="true"></i> Add Student</button>
+                    <i class="fa fa-plus" aria-hidden="true"></i> Add Student
+                </button>
+                <button class="btn btn-primary" onclick="changeToV2()">
+                    Change db to version 2
+                </button>
             </div>
             <table id="tblGrid" class="table table-hover ">
                 <caption
@@ -79,14 +83,6 @@
                 </div>
             </form>
         </div>
-
-        <div class="col-centered">
-            <button class="btn btn-primary" onclick="changeDbSchemaToV2AndRestoreUsingMemory()">Change Schema and
-                restore
-                data using memory</button>
-            <button class="btn" onclick="changeDbSchemaToV2AndRestoreWithAnotherTable()">Change Schema and restore data
-                without memory</button>
-        </div>
     </div>
 
     <link href="style/main.css " rel="stylesheet " type="text/css " />

change-db-schema/scripts/index.js

@@ -5,13 +5,37 @@ var jsstoreCon = new JsStore.Connection(new Worker("scripts/jsstore.worker.js"))
 window.onload = function () {
     refreshTableData();
     registerEvents();
-    initDb();
+    initDb(getDbSchema());
 };
 
-async function initDb() {
-    var isDbCreated = await jsstoreCon.initDb(getDbSchema());
+async function initDb(dbSchema) {
+    var isDbCreated = await jsstoreCon.initDb(dbSchema);
     if (isDbCreated) {
+        localStorage.setItem("db_version", dbSchema.version);
+
         console.log('db created');
+        if (dbSchema.version === 2) {
+            var datas = await jsstoreCon.select({
+                from: "Student"
+            });
+            datas.forEach(data => {
+                const gender = data.gender;
+                if (!gender) {
+                    data.gender = 0;
+                }
+                else {
+                    data.gender = gender === "male" ? 1 : 2;
+                }
+            })
+
+            await jsstoreCon.insert({
+                into: "Student",
+                values: datas,
+                upsert: true
+            })
+            refreshTableData();
+            console.log("data type updated");
+        }
     }
     else {
         console.log('db opened');
@@ -41,13 +65,25 @@ function getDbSchema() {
             city: {
                 dataType: 'string',
                 notNull: true
+            },
+        },
+        alter: {
+            // 2 is database version to target
+            2: {
+                modify: {
+                    gender: {
+                        //1 means male, 2 means female, 0 means unknown
+                        dataType: "number"
+                    }
+                },
             }
         }
     }
-
+    const dbVersion = localStorage.getItem("db_version");
     var db = {
         name: 'My-Db',
-        tables: [table]
+        tables: [table],
+        version: dbVersion ? Number(dbVersion) : null
     }
     return db;
 }
@@ -198,107 +234,10 @@ function refreshFormData(student) {
     $('#txtCity').val(student.city);
 }
 
-function getDbSchemaV2() {
-    var table = {
-        name: 'Student',
-        columns: {
-            id: {
-                primaryKey: true,
-                autoIncrement: true
-            },
-            name: {
-                notNull: true,
-                dataType: 'string'
-            },
-            gender: {
-                dataType: 'string',
-                default: 'male'
-            },
-            country: {
-                notNull: true,
-                dataType: 'string'
-            },
-            city: {
-                dataType: 'string',
-                notNull: true
-            }
-        },
-        version: 2
-    }
-
-    var db = {
-        name: 'My-Db',
-        tables: [table]
-    }
-    return db;
-}
-
-async function changeDbSchemaToV2AndRestoreUsingMemory() {
-    var allData = await jsstoreCon.select({
-        from: 'Student'
-    });
-
-    var isDbCreated = await jsstoreCon.initDb(getDbSchemaV2());
-    if (isDbCreated) {
-        await jsstoreCon.insert({
-            into: 'Student',
-            values: allData
-        })
-        alert("data successfully inserted from v1 to v2")
-    }
-}
-
-function getDbSchemaV2WithAnotherTable() {
-    var table = {
-        name: 'Student',
-        columns: {
-            id: {
-                primaryKey: true,
-                autoIncrement: true
-            },
-            name: {
-                notNull: true,
-                dataType: 'string'
-            },
-            gender: {
-                dataType: 'string',
-                default: 'male'
-            },
-            country: {
-                notNull: true,
-                dataType: 'string'
-            },
-            city: {
-                dataType: 'string',
-                notNull: true
-            }
-        }
-    };
 
-    var newTable = Object.assign({}, table);
-    newTable.name = "StudentV2";
-    newTable.version = 2
 
-    var db = {
-        name: 'My-Db',
-        tables: [table, newTable]
-    }
-    return db;
+function changeToV2() {
+    const db = getDbSchema();
+    db.version = 2;
+    initDb(db);
 }
-
-async function changeDbSchemaToV2AndRestoreWithAnotherTable() {
-
-
-    var isDbCreated = await jsstoreCon.initDb(getDbSchemaV2WithAnotherTable());
-    if (isDbCreated) {
-
-        var allData = await jsstoreCon.select({
-            from: 'Student'
-        });
-        await jsstoreCon.insert({
-            into: 'StudentV2',
-            values: allData
-        })
-        alert("data successfully inserted from v1 to v2")
-    }
-}