Shulou(Shulou.com)06/03 Report--

This article is about how to move a database from a server to a browser. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

First, link the database

IndexedDB does not have the concept of creating a database, you can directly link to the database, if your linked database does not exist, then it will automatically create a database. Look at the following example.

Document link database / / In the following line, you should include the prefixes of implementations you want to test. Window.indexedDB = window.indexedDB | | window.mozIndexedDB | | window.webkitIndexedDB | | window.msIndexedDB; / / DON'T use "var indexedDB =." If you're not in a function. / / Moreover, you may need references to some window.IDB* objects: window.IDBTransaction = window.IDBTransaction | | window.webkitIDBTransaction | | window.msIDBTransaction; window.IDBKeyRange = window.IDBKeyRange | | window.webkitIDBKeyRange | | window.msIDBKeyRange / / (Mozilla has never prefixed these objects, so we don't need window.mozIDB*) function connectDB (name,version,success,error) {let dbConnect = indexedDB.open (name,version) DbConnect.onsuccess = function (e) {console.log ('database link successful!') ; success (e.target.result);} dbConnect.onerror = function (e) {console.log ('database link failed!') ; error (e);} dbConnect.onupgradeneeded = function (e) {success (e.target.result); let oldVersion = e.oldVersion; let newVersion = e.newVersion; console.log ('database updated successfully, the old version number is:' + oldVersion+', the new version number is: + newVersion) }} _ window.onload=function () {let btn = document.getElementById ('conbtn'); btn.onclick = function () {connectDB (' ',1,function () {console.log ('link successful or updated callback function') }, function () {console.log ('callback function for link failure!') );}}

I clicked on the link database twice, and the result was this.

We found one more thing in Application's indexedDB.

You can see that the database has been successfully established.

IndexedDB's open method is used to link or update the database, and the first creation is considered an update. The first parameter is the name of the database, and the second parameter is the version number. Update the event upgradeneeded when the first creation or version number is changed, start the success event when the link is successful, and trigger the error event when the link error occurs.

Second, build tables and indexes Document link database / / In the following line, you should include the prefixes of implementations you want to test. Window.indexedDB = window.indexedDB | | window.mozIndexedDB | | window.webkitIndexedDB | | window.msIndexedDB; / / DON'T use "var indexedDB =." If you're not in a function. / / Moreover, you may need references to some window.IDB* objects: window.IDBTransaction = window.IDBTransaction | | window.webkitIDBTransaction | | window.msIDBTransaction; window.IDBKeyRange = window.IDBKeyRange | | window.webkitIDBKeyRange | | window.msIDBKeyRange / / (Mozilla has never prefixed these objects, so we don't need window.mozIDB*) function connectDB (name,version,success,update,error) {let dbConnect = indexedDB.open (name,version) DbConnect.onsuccess = function (e) {console.log ('database link successful!') ; success (e.target.result);} dbConnect.onerror = function (e) {console.log ('database link failed!') ; error (e);} dbConnect.onupgradeneeded = function (e) {update (e.target.result); let oldVersion = e.oldVersion; let newVersion = e.newVersion; console.log ('database updated successfully, the old version number is:' + oldVersion+', the new version number is: + newVersion) } function createTable (idb,storeName,key,idxs) {if (! idb) {console.log (idb); return;} if (! key | |! idxs) {console.log ('parameter error'); return;} if (! storeName) {console.log ('storeName must'); return;} try {var store = idb.createObjectStore (storeName,key) Console.log ('database storage object (table) created successfully'); for (var I = 0 position I

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.