Using Local storage in phone gap

23
votes

I wanted to create an mobile app for my web project. I found phonegap. It says Easily create apps using HTML, CSS, and JavaScript. I have not created a mobile app using phone gap before. There are three storage options memory-store.js (MemoryStore), ls-store.js (LocalStorageStore) and websql-store.js (WebSqlStore). I just want to save a token to recognise the user. Which storage is best suited. Is there a better way to build an mobile app.

I appreciate any help.

4
cordovamobilephonegap-build

4 Answers

42
votes

Using Local Storage will probably be easiest for your needs.

Fundamentally speaking PhoneGap apps are native apps (so they can be distributed through app stores) that simply run a web page or pages. The PhoneGap API then provides JavaScript hooks into the device functions like camera etc. Theres more to it but for now thats the background.

So since the app is essentially a web page (HTML5, CSS, JS) you can make use of LocalStorage (part of HTML5).

Example local storage usage:

Setting values:

localStorage.myname = "Greg";

Getting values:

localStorage.myname; // returns "Greg"

More information here for local storage: http://diveintohtml5.info/storage.html

For Windows Phone 7 : http://docs.phonegap.com/en/3.4.0/cordova_storage_storage.md.html#Storage

The syntax is as below 

localStorage.setItem("name", "Alen");

localStorage.getItem("name"); //will return Alen
1
votes

A point to add about using localStorage is that it's only supported by HTML5-compliant devices. For earlier devices (also a fine choice for new devices) the option is to use phonegap's SQLite implementation. See here...

0
votes

I would recommend you also look into Lawnchair persistent storage solution. It was built with a mobile first approach. I have used it in some projects; it works really well.

Sample code

var store = new lawnchair({name:'testing'}, function(store) {
    // create an object
    var me = {key:'brian'};

    // save it
    store.save(me);

    // access it later... yes even after a page refresh!
    store.get('brian', function(me) {
        console.log(me);
    });
});

You can read more about it at http://brian.io/lawnchair/

0
votes

Friend, I've tried too without success to use cookies with phonegap. The solution was use localStorage.

Key Quick Example:

 var keyName = window.localStorage.key(0);

Set Item Quick Example:

 window.localStorage.setItem("key", "value");

Get Item Quick Example 

 var value = window.localStorage.getItem("key");
 // value is now equal to "value"

Remove Item Quick Example:

 window.localStorage.removeItem("key");

Clear Quick Example:

 window.localStorage.clear();

If you use you javascript for both mobile and web, you can use this code to detect that enviroment:

var wl = window.location.href;
var mob = (wl.indexOf("android")>0);

References: http://docs.phonegap.com/en/1.2.0/phonegap_storage_storage.md.html#localStorage http://cordova.apache.org/docs/en/6.x/cordova/storage/storage.html#page-toc-source

Be aware: using anonymous navigation on iOS may make localstorage not work like spected. A simple test that are working fine to me:

$(document).ready(function () {
    try {
        localStorage.setItem('test', '1');
    } catch (Err) {
        if (Err.message.indexOf('QuotaExceededError') > -1) {
            // Tell the user they are in anonymous mode
            // Sugest it to go to https://support.apple.com/pt-br/HT203036 to get help to disable it
            }
        }
    }
});