Currently my app saves to localstorage. I need to change that so that it saves to a SQL Lite 2 database using Local Forage.

I did not yet create the SQL Lite 2 database. I am trying to set up localforage-cordovasqlitedriver so that it works in some default out of box way, and then change it to work with my project.

*Everything related to this must be run from ether index.html or a combination of index.html and various JavaScript files.

I have localforage-cordovasqlitedriver installed into my ionic v1 Cordova project.

See https://github.com/thgreasi/localForage-cordovaSQLiteDriver and https://www.npmjs.com/package/localforage-cordovasqlitedriver for details

The following pre-requisites are also installed:

LocalForage (https://github.com/localForage/localForage)
Cordova SQL Lite Plugin 2 (https://github.com/nolanlawson/cordova-plugin-sqlite-2)

I removed everything from my project that would constitute a security/trade secret/intellectual property issue, and have it stripped down to a bare minimum/shell project in the folder ECTCB_CS_iteration1_basic accessible at https://aloyecom.us1.aloye.online/wp-content/uploads/localforage/ECTCB_CS_iteration1_basic.zip

I need tutorial style assistance creating “whatever needs to exist” in my main index.html page and JavaScript so that I can simply change my code from localstorage.setItem(myKey, myValue); and localstorage.getItem(myKey, myValue); to localforage.setItem(myKey, myValue); and localforage.getItem(myKey, myValue); and make use of a SQL Lite 2 database instead of localstorage to perform the saves.

The end goal is to achieve the following:

a local persistent named SQL Lite 2 Database that I can save to using localforage-cordovasqliitedriver.

instantiate the localforage-cordovasqlitedriver from the index.html page and let it run so that every time I my app needs to save, it simply executes localforage.setitem(key,value) and the driver is already set up and running to accept that.

The same instantiation would also serve to allow the app to execute localforage.getitem(key,value) from the app as the driver would already set up and running to accept that.

In an attempt to try and get this set up, I used the default info in the documentation and set up index.html as shown below.

Index.html

<!DOCTYPE html>

<html>

                  <head>

                   <meta charset=”utf-8″>

                   <meta name=”viewport” content=”initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width”>

                 <title></title>

                   <link href=”lib/ionic/css/ionic.css” rel=”stylesheet”>

                   <link href=”css/style.css” rel=”stylesheet”>

                   <script src=”lib/ionic/js/ionic.bundle.js”></script>

                   <script src=”cordova.js”></script>

                <script src=”lib/localforage/dist/localforage.js”></script>

                   <script src=”lib/localForage-cordovaSQLiteDriver/dist/localforage-cordovasqlitedriver.js”></script>

                <script src=”js/app.js”></script>

                <script src=”js/initlocalforageCordovasqlitedriver.js”></script>

                <script><script src=”cordova.js”></script>

<script src=”lib/localforage/dist/localforage.js”></script>

<script src=”lib/localForage-cordovaSQLiteDriver/dist/localforage-cordovasqlitedriver.js”></script>

<script>

localforage.defineDriver(window.cordovaSQLiteDriver).then(function() {

                   return localforage.setDriver([

                     // Try setting cordovaSQLiteDriver if available,

                   window.cordovaSQLiteDriver._driver,

                   // otherwise use one of the default localforage drivers as a fallback.

                   // This should allow you to transparently do your tests in a browser

                   localforage.INDEXEDDB,

                   localforage.WEBSQL,

                   localforage.LOCALSTORAGE

                   ]);

}).then(function() {

                  // this should alert “cordovaSQLiteDriver” when in an emulator or a device

                alert(localforage.driver());

                  // set a value;

                  return localforage.setItem(‘testPromiseKey’, ‘testPromiseValue’);

}).then(function() {

return localforage.getItem(‘testPromiseKey’);

}).then(function(value) {

alert(value);

}).catch(function(err) {

                  alert(err);

});

</script>

                   </head>

                   <body ng-app=”starter”>

                   <ion-nav-view></ion-nav-view>

                </body>

</html>

When I build the project for IOS using “ionic cordova build IOS” and then generate an IOS app from it, then run it on my iPad, I get the following alert which indicates that the SQL Lite Driver is being used.

However – I do not understand what or how it is accessing a SQL Lite 2 Database.

Then, it shows me the value of the passed data that was saved using the command localforage.getItem(‘testPromiseKey’); so I know its saving this data somewhere. I need to understand where.

Does it dynamically create a SQL Lite Database?

Is the SQL Lite Database persistent?

The SQL Lite DB I use needs to be persistent and named.

The next step was to change things around with the goal of initializing the localforage-cordovasqlitedriver in one section of code, and then simply calling it from another area of code. I will need to ultimately activate the driver and connect to the SQL Lite 2 Database, and then execute my localforage.setitem commands from another area of the application. So being able to separate when things are done and from where they get initialized and instantiated is important.

I used a new project in folder ECTCB_CS_iteration2_hasAsyncProblem accessible at https://aloyecom.us1.aloye.online/wp-content/uploads/localforage/ECTCB_CS_iteration2_hasAsyncProblem.zip

I created a JavaScript code file called initlocalforageCordovasqlitedriver.js that contains one function, EnableLocalForage()

The goal is to simply execute EnableLocalForage() from index.html instead of the default code.

Ultimately, the goal is to do something like EnableLocalForage (myKey, myValue) from index.html or another javascript file and then pass the key and data to the localforage.setitem (myKey, myValue) command within the initlocalforageCordovasqlitedriver.js

initlocalforageCordovasqlitedriver.js

function EnableLocalForage(){

localforage.defineDriver(window.cordovaSQLiteDriver).then(function() {

return localforage.setDriver([

// Try setting cordovaSQLiteDriver if available,

window.cordovaSQLiteDriver._driver,

// otherwise use one of the default localforage drivers as a fallback.

// This should allow you to transparently do your tests in a browser

localforage.INDEXEDDB,

localforage.WEBSQL,

localforage.LOCALSTORAGE

]);

}).then(function() {

// this should alert “cordovaSQLiteDriver” when in an emulator or a device

alert(localforage.driver());

// set a value;

return localforage.setItem(‘testPromiseKey’, ‘testPromiseValue’);

}).then(function() {

return localforage.getItem(‘testPromiseKey’);

}).then(function(value) {

alert(value);

}).catch(function(err) {

alert(err);

});

}

Index.html

<!DOCTYPE html>

<html>

<head>

</head>

<ion-nav-view></ion-nav-view>

</body>

</html>

The problem is that when I separate it out this way, it doesn’t use localforage-cordovasqlitedriver and instead defaults to asyncstorage when I run on the same iPad or iPhone.

It still retrieves the data, but it doesn’t use SQL Lite 2 Db and instead uses local storage or one of the other 2 asynchronous storage types.

Why doesn’t it work, when I separate it out in this way?

Why is SQL Lite DB not being used and instead Asynchronous storage is being used?

If I further try and break it out so that it gets even closer to my application’s architecture, the same aync storage issue occurs.

Nonetheless, we ultimately need to get here so the folder ECTCB_CS_iteration3_hasAsyncProblem contains the 3^rditeration of the project. In this version, the localforage-cordovasqlitedriver and related material get executed from a subfolder after the project detects some device specific elements and opens the index.html from the appropriate application sub folder.

The third iteration ECTCB_CS_iteration3_hasAsyncProblem can be downloaded from https://www.aloye.comwp/wp-content/uploads/localforage/ECTCB_CS_iteration3_hasAsyncProblem.zip

However, it does not make sense to look too deeply into this before we understand the first and second iterations listed above.

LocalForage SQL Lite Driver