Is LocalForage persistent?

[marcgraf]

Hi Guys,

iam currently working on my first ionic 2 app.

Works good so far and after some changes with rc0, webpack it looks awesome right now!

But iam not sure how to persist my data.

My app is a workout app and right now iam struggeling somehow with this topic.

Ionic Nativestorage looks good, but i cant debug it in my browser, or is there a way to do so?

window.localstorage is not 100% persistent. Is this true?

And the last one: LocalForage! Sound really promissing, but iam note sure if LocalForage is the best choice here.

What do i want to do?

The user have a workout plan which i want to save for something like 8 weeks and a mealplan which is valid for 1 week.

Do you have some tips for me, which way i should go?

Thanks a lot!

[reedrichards]

Have a look at the comment of @lorenz there, sounds like ionic storage is quite a good solution.

Where is Storage and LocalStorage in rc0?

As @gasaki already mentioned you should use @ionic/storage. This uses LocalForage when running in a desktop browser only if no “better” option is available or e.g. SQLite when running on a device. Here is the description: /** Storage is an easy way to store key/value pairs and other complicated data in a way that uses a variety of storage engines underneath. Currently, Storage uses localforage underneath to abstract away the various storage engines while still providing a simple API. When…

You should be able to see your data while debugging in your browser with ionic storage too or what do you mean with “you can’t debug”? (in chrome, when I go in the debug panel, tab “Application” under “Storage / Web SQL / _ionicstorage / _ionickv” I see my data personally)

[marcgraf]

Thanks. Sounds like native storage is the way to go

But when i do this:

  NativeStorage.setItem('myitem', {property: 'value', anotherProperty: 'anotherValue'})
        .then(
            () => console.log('Stored item!'),
            error => console.error('Error storing item', error)
        );

    NativeStorage.getItem('myitem')
        .then(
            data => console.log(data),
            error => console.error(error)
        );

i get the error, that cordova_not_available

recipe-data.js:21 Error storing item cordova_not_availableRecipeData.__WEBPACK_IMPORTED_MODULE_2_ionic_native__.a.setItem.then.error @ recipe-data.js:21t.invoke @ polyfills.js:3e.run @ polyfills.js:3(anonymous function) @ polyfills.js:3t.invokeTask @ polyfills.js:3e.runTask @ polyfills.js:3i @ polyfills.js:3
recipe-data.js:23 cordova_not_available

[reedrichards]

I had the same error and did the same mistake

Basically you have to declare ionic storage as a provider in app.module and then declare it again in your constructor aka not use it directly NativeStorage.setItem or NativeStorage.getItem as you did

There the steps I did to achieve it working:

Where is Storage and LocalStorage in rc0?

I was able to implement the Ionic2 Storage too. Since I posted here above a solution with LocalForage, here how I switched to Storage: 1_Remove localforage sudo npm remove localforage --save 2_Remove localforage typescript definition sudo npm remove @types/localforage --save-dev 3_Install (or install again) the Ionic storage sudo npm install @ionic/storage --save --save-exact 4_As @apreg pointed out, declare Storage in your providers of app.modules.ts import { Storage } from '@ioni…

[marcgraf]

Done, but for some reason this dont work for me

Do you also use “ionic serve”?

[reedrichards]

Yep.

Did you stop your server and start it again? No compilation error?
Have you try in an incognito tab (maybe you still have old data in your storage)?

If yes, no and yes … would you like to show your code?

[marcgraf]

Haha, yes, no and yes

When i use “ionic run browser” it works. I think this could be a problem with cordova.js.

[reedrichards]

Kind of strange, I run “ionic serve” and I didn’t face any problems.

[reedrichards]

Checked again works for me with ionic serve. Wanna show some piece of codes or do you get errors?

Otherwise can’t help more, maybe someone else

[marcgraf]

Sure:

at the moment i tested this:

import { Component } from '@angular/core';
import { NavController, ActionSheetController } from 'ionic-angular';
import { AppData } from '../../../providers/app-data/app-data';
import { RecipeData } from '../../../providers/reciepe-data/recipe-data';

import { NativeStorage } from 'ionic-native';
import { Platform } from 'ionic-angular';

import {ReciepeListPage} from '../reciepe-list/reciepe-list'
import {ReciepeProfileListPage} from '../reciepe-profile-list/reciepe-profile-list'

@Component({
    templateUrl: 'my-meal-plan.html',
    providers: [AppData, RecipeData]
})
export class MyMealplanPage {

    public recipes:any;

    constructor(public nav:NavController, public actionSheetCtrl:ActionSheetController, public appData:AppData, public recipeData:RecipeData, public platform: Platform) {
        //this.getMealPlan();

        platform.ready().then((readySource) => {
            console.log("ready");

            NativeStorage.setItem('myitem', {property: 'value', anotherProperty: 'anotherValue'})
                .then(
                    () => console.log('Stored item!'),
                    error => console.error('Error storing item', error)
                );

            NativeStorage.getItem('myitem')
                .then(
                    data => console.log(data),
                    error => console.error(error)
                );
        })
    }...

But a also tried it with nativestorage = new NativeStorage, a Provider and a lot of other stuff.

[reedrichards]

Thx for the piece of code. As I told you above, using NativeStorage.setItem(… and NativeStorage.getItem(… won’t work or at least didn’t worked in my case

You should define Storage as a provider in app.module.ts

providers: [Storage]

Then in your MyMealplanPage add the storage in your constructor

constructor(public storage:Storage, public nav:NavController, public actionSheetCtrl:ActionSheetController, public appData:AppData, public recipeData:RecipeData, public platform: Platform) {

and then use the service object like following

 this.storage.setItem('myitem', {property: 'value', anotherProperty: 'anotherValue'})
            .then(
                () => console.log('Stored item!'),
                error => console.error('Error storing item', error)
            );

and

 this.storage.getItem('myitem')
            .then(
                data => console.log(data),
                error => console.error(error)
            );

[marcgraf]

Ah, i already did this in some other views.

But i thought storage is only using localstorage?

But if this works it would be awesome! Thanks a lot

[reedrichards]

• When running natively, Storage will prioritize using SQLite, as it’s one of
• the most stable and widely used file-based databases, and avoids some of the
• pitfalls of things like localstorage that the OS can decide to clear out in
• low disk-space situations.
• When running in the web or as a Progressive Web App, Storage will attempt to use
• IndexedDB, WebSQL, and localstorage, in that order.

So storage kind of cascade the storage possibility to find the most suitable one…if I understood correctly

[gvorster]

I am using 2.0.0-rc.1 and use

 import { Storage } from '@ionic/storage';
 this.storage.set(key, value);

Looking in Chrome console I saw the data persisted in Web SQL also after restarts.

Somehow after a while I noticed my data was gone and next time it was stored in IndexedDB.