The IndexedDB is used to solve the problem of offline storage mechanisms that are supported by all the major browsers.It uses WebSQL implemented in browsers like Opera and Safari to expose IndexedDB API for web applications.
Websites are able to use the single IndexedDB API for all offline needs with the polyfill.
With the use of polyfill, mobile sites can have better offline storage.
The IndexedDB API is currently supported by Firefox,IE10 and Chrome, while browsers like Opera and Safari support the WebSQL API.
It Works on Cordova and PhoneGap via the IndexedDB plug-in. And It Works on desktop and mobile devices.
Installation of IndexedDB Polyfill:
We can download the development script, or install it using NPM or Bower.
For Node:
npm install indexeddbshim
For Bower:
bower install IndexedDBShim
Using Polyfill:
Adding the script to the page:
<script src="dist/indexeddbshim.min.js"></script>
Example:
// This works on all devices/browsers, and uses IndexedDBShim as a final fallback
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB || window.shimIndexedDB;
// Open (or create) the database
var open = indexedDB.open("IDatabase", 1);
// Create the schema
open.onupgradeneeded = function() {
var db = open.result;
var store = db.createObjectStore("MyObjectStore", {keyPath: "id"});
var index = store.createIndex("NameIndex", ["name.last", "name.first"]);
};
open.onsuccess = function() {
// Start a new transaction
var db = open.result;
var tx = db.transaction("MyObjectStore", "readwrite");
var store = tx.objectStore("MyObjectStore");
var index = store.index("NameIndex");
// Add some data
store.put({id: 22334, name: {first: "Chris", last: "smith"}, age: 33});
store.put({id: 33445, name: {first: "Marry", last: "com"}, age: 27});
// Query the data
var getChris = store.get(22334);
var getMarry = index.get(["com", "Marry"]);
getMarry.onsuccess = function() {
console.log(getMarry.result.name.first); // => "Marry"
};
getChris.onsuccess = function() {
console.log(getChris.result.name.first); // => "Chris"
};
// Close the db when the transaction is done
tx.oncomplete = function() {
db.close();
};
}
Building IndexedDB:
To build the project locally on computer from the following steps:
git clone https://github.com/axemclion/IndexedDBShim.git
Install dev dependencies
npm install
Run the build script
npm start
Done
The output files will be generated in the dist directory
Testing in a Browser
If you want to run the tests in a normal web browser. Then you'll need to spin-up a local web server and then open test/index.html and/or tests/index.html in your browser.
1 Comment(s)