Appropriate Local Storage for Ionic


#1

Hallo,

I am reading about Local Storage and I am quite confused. As I see there are two options:

  1. Native Storage , import { NativeStorage }
  2. Ionic Storage, import { IonicStorageModule }

My app is developed with Ionic 3 and I am trying to save an array of object localy after retrieve it from Parse Server.

With Ionic 1 I stored the objects array like this:

setUsers (users){
        window.localStorage.users_data = JSON.stringify(users);
    }
    getUsers(){
       return JSON.parse(window.localStorage.users_data || '[]');
    }

So now, what is the best option to save my data and stringfy them and parse them?

Thank you a lot


#2

Hi

Ionic Storage I would say. Until you have reasons to ditch it.

Regards

Tom


#3

Thank you Tommertom

I will go with Ionic Storage. Can you clarify me a little how to use it to stringify data and parse data?

How my functions will be?

Thank you


#4

Hi
there will be no need to stringify

Just check the examples on https://ionicframework.com/docs/storage/

And make sure you check on storage.ready before accessing the magic

For persistence sake, use the sqlite plugin.

Regards
Tom


#5

I am reading the docs but I cannot figure out…

I used this one for my data

setUsers (users){
        window.localStorage.users_data = JSON.stringify(users);
    }

how it will be for the Ionic storage?


#6

Hi

The shortest way is

This.storage.set(‘users’,users)

Tom


#7

Hi Tom,

this is not working

I am getting my array from Parse Server and save it on

tmp: any [];

and this is the function i run on cloud code

retrieveUsers(){
    if (this.currentUser= Parse.User.current()) {
      Parse.Cloud.run('UserQuery').then(
      res => {
        console.log('user query')
        this.tmp = res;
        console.log(this.tmp);
        this.localdata.setUsers(this.tmp);
        this.users = this.localdata.tmpusers;
        console.log(this.users);

      }
      )
    }
     
   }

and this is my service for local storage

import { Component } from '@angular/core';

export class localData {
    
    setUsers (users){
        window.localStorage.users_data = JSON.stringify(users);
    }
    getUsers(){
       return JSON.parse(window.localStorage.users_data || '[]');
    }

    tmpusers = this.getUsers();
    constructor(){
        this.tmpusers.sort(function(a, b) {
            var nameA = a.username.toUpperCase(); // ignore upper and lowercase
            var nameB = b.username.toUpperCase(); // ignore upper and lowercase
            if (nameA < nameB) {
              return -1;
            }
            if (nameA > nameB) {
              return 1;
            }
                      
            return 0;
          });
    }
    
}  

#8

Hi

You are not using Ionic Storage

So not much I can say until you do so

The code on the doc is straightforward Angular stuff you first need to grasp if you dont get it

Regards

Tom


#9

Well,

I wrote it likes this:

import { Storage } from '@ionic/storage';
import { Injectable, Component } from '@angular/core';
 
@Injectable()
export class Data {

    
    tmpusers = this.getUsers2();
  constructor(public storage: Storage){
     
  }
 
  getUsers2() {
    return this.storage.get('users'); 
  }
 
  setUsers2(users){
    this.storage.set('users', users);
  }
  
}

but i have this error:

Error trying to diff ‘[object Promise]’. Only arrays and iterables are allowed

are you sure that stringify and parse is not needed?

thank you Tom


#10

Hi

Your get returns a promise you need to resolve before you save

So this.getUsers2().then(value=>{this.set etc…)

And then save

Similarly, if the data you het from the server is a promise (which seems to be from the error putput), ypu need to .then it

And the error says you can store arrays…

Regards

Tom


#11

Hi,

I am retrieving from server an object array not a promise.

Also, i first use setusers2() to save the array with ionic storage.

Then i use getusers2() to use this array.

But as i said the problem is that the getusers2() does not return the array cause of the missing json.parse


#12

Your code style looks out of date. I’d recommend you stop using any and var. Instead, learn the basics of Typescript, ES2015, and Promises. That will take a few days. Then the official code for Ionic Storage will make a lot more sense.


#13

@AaronSterling thank you for the advice, i really try to understand.

Everything was working with

setUsers (users){
        window.localStorage.users_data = JSON.stringify(users);
    }
    getUsers(){
       return JSON.parse(window.localStorage.users_data || '[]');
    }

and i have replaced with

getUsers2() {
    return this.storage.get('users'); 
  }
 
  setUsers2(users){
    this.storage.set('users', users);
  }

I just cant understand why


#14

Hi

Try to store and get a simple string

If you cant get that to work, even in a simple starter project (or use the Ionic Storage example) then you know you defintely a looking in the wrong direction

Regards

Tom


#15

Hi Tom!

you are right…I make the simple example of git and i get null…

settest(name){
  this.storage.set('name', 'Mr. Ionitron');
  }
  
  gettest(){
  this.storage.get('name').then((name) => {
    console.log('Me: Hey, ' + name + '! You have a very nice name.');
    console.log('You: Thanks! I got it for my birthday.');
  });
}

this name returns null on the console…

any idea??


#16

I managed make it work but not totally…

In the second screen i see that the class of user is retrieved but I cant read the column username. Thats why the list is empty

Any idea?


#17

Hi

working for me allright

check repository https://github.com/Tommertom/storagetest

rgdz

tom


#18

Of course it is working as expected. You have a ready table of items.
I am getting from my Parse Server a response that is not arrray and must be converted to array.

My old code as I have said was working with localstorage.
And by the way i see that localstorage is much more faster than Ionic storage


#19

Hi

Then I suggest you rephrase your question to how to convert a result into array before storing.

Regards

Tom


#20

You are right!

But from the beginning I mentioned that Ionic Storage cannot handle the json response to array.