After hours of search on google there was no proper documentation on how to implement step by step instructions to implement local storage for hybrid mobile application.
This post will help you implement the feature without searching multiple locations for instructions.
1) Create a IONIC or Cordova basic application using command line
Cordova based app
Cordova create localStoreApp
IONIC based app
ionic start localStoreApp
2) Add the ios platform to the application
cd localStoreApp
cordova platform add ios
ioinc platform add ios
3) Build the basic app to check cli is correctly building
cordova build ios
ionic build ios
4) Add sqlite plugin
cordova plugin add https://github.com/litehelpers/cordova-sqlite-common
5) Add the plugin to the config.xml file in the current directory,
under the setting <access origin="*"/>
<plugin name="SQLitePlugin" value="SQLitePlugin" />
6) If local storage is not required to be backed up on iCloud,
Under the settings <platform name="ios">
<preference name="BackupWebStorage" value="local"/>
7) Copy the SQLitePlugin.js file under the directory
plugins / cordova-sqlite-common/www/
SQLitePlugin.js
8) Past the copied file into the current locations www/js directory
9) Refer the SQLitePlugin.js file from the index.html file.
Reference should be below cordova.js file
10) Access the databased on where it needs to be used.
sqlite should be accessed after the deviceready event in Cordova and $ionicPlatform.ready call back in IONIC.
var db = window.sqlitePlugin.openDatabase("Database", "1.0", "Demo", -1);
db.transaction(function(tx) {
tx.executeSql('DROP TABLE IF EXISTS test_table');
tx.executeSql('CREATE TABLE IF NOT EXISTS test_table (id integer primary key, data text, data_num integer)');
alert("DB droped")
tx.executeSql("INSERT INTO test_table (data, data_num) VALUES (?,?)", ["test", 100], function(tx, res) {
console.log("insertId: " + res.insertId + " -- probably 1");
//alert("rowsAffected: " + res.rowsAffected + " -- should be 1");
alert("Data Inserted")
tx.executeSql("select count(id) as cnt from test_table;", [], function(tx, res) {
console.log(("res.rows.length: " + res.rows.length + " -- should be 1");
console.log(("res.rows.item(0).cnt: " + res.rows.item(0).cnt + " -- should be 1");
alert("Data Selected")
});
tx.executeSql("select data from test_table;", [], function(tx, res) {
console.log(("res.rows.length: " + res.rows.length + " -- should be 1");
alert("res.rows.item(0) :" + res.rows.item(0).data );
alert("Data Selected")
});
}, function(e) {
alert("ERROR: " + e.message);
});
});
11) Build and Prepare the application for platform
cordova build ios
ionic build ios
12) run the application using the cli command or via the xcode
cli - cordova run ios --device
ionic run ios --device
xcode - navigate the the folder
platforms / ios
open the file localstoreapp.xcodeproj
run the application by clicking on play button or product menu > run
Kindly let me know if you encounter any build error or if the application does not get deployed correctly.
Suppose if the application does get built but not correctly gets deployed then remove the platform and add it. remember to run the prepare ios command which will download the necessary files needed for ios.
Happy coding
