How to store array in local storage angular?

Question

I was trying to store data in an array to get it later in other component but it's provoking error:

ERROR TypeError: Cannot read property 'push' of undefined

I used local storage.

onSubmit() {
    let email = this.AuthForm.get("email").value;
    let password = this.AuthForm.get("password").value;
    let nomcomplet = "";
    let occupation = "";
    let niveau = 0;
    let newUser = new User(email, password, nomcomplet, occupation, niveau);
    console.log(newUser);
    let val: any = [];
    val = this.storage.get(this.key);
    val.push(newUser.email);
    this.storage.set(this.key, JSON.stringify(val));
}

I expected to find all the stored values in the local storage but the actual is error and only the last value get stored before

screen capture

enter image description here

When you get array from localStorage use JSON.parse(localStorage.getItem()). — Narendra Jadhav
– Narendra Jadhav, Commented Aug 24, 2019 at 15:51

chrismclarke · Accepted Answer · 2019-08-24 16:32:14Z

3

You've stored your data as a string, so when you retrieve it you should parse it back to be an object.

set storage

this.storage.set(this.key, JSON.stringify(val));

retrieve from stroage

const storageVal = this.storage.get(this.key)
const val = JSON.parse(storageVal)

You may also want to add a method to handle cases where the storage object does not exist (returns a null value)

const storageVal = this.storage.get(this.key)
const val = storageVal ? JSON.parse(storageVal) : []

answered Aug 24, 2019 at 16:32

chrismclarke

2,11512 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Wolf Blazer · Accepted Answer · 2019-08-24 17:30:12Z

Ok let´s Try this

     let email = this.AuthForm.get("email").value;
     let password = this.AuthForm.get("password").value;
     let nomcomplet = "";
     let occupation = "";
     let niveau = 0;
     let newUser = new User(email, password, nomcomplet, occupation, niveau);
     console.log(newUser);
     let array: any = [];

     if (localStorage.getItem(keyToFindOrSave)) {
      //exist data on storage
      //so grab the storage
       array = JSON.parse(localStorage.getItem(this.key)); //we overwrite the same arry with the data from LocalStorage

    }

      console.log(array); //Watching if have some old data!
      array.push(newUser) //So we push the newUser , if exist something on localStorage the if before actually have the data
      console.log(array); //Watching with new data and old data
      localStorage.set(keyToFindOrSave, JSON.stringify(array)); //and save the data

Remember that keyToFindOrSave allways need to be the same (y)

And when you need the data on another component just grab with

let dataFromStorage : any;
if (localStorage.getItem(keyToFindOrSave)) { //always ask if exist the localStorage =D
 dataFromStorage = JSON.parse(localStorage.getgetItem(keyToFindOrSave));
}

Some Screenshot LocalStorage Data

I edited the post and shared a link of screen capture in the browser storage,
the values are non ordered , it's like a guarbage , accessing to them will be so hard
what i want to see is every object stored with it's own index,
let array: any = []; if (localStorage.getItem('session')) { const data = JSON.parse(localStorage.getItem(this.key)); //we need Parse the data coming from storage like string array.push(data); //we save the previous data on localStorage } console.log(array); //Watching if have some old data! array.push(newUser) //So we push the newUser , if exist something on localStorage the if before actually have the data console.log(array); localStorage.setItem(this.key, JSON.stringify(array));

Collectives™ on Stack Overflow

How to store array in local storage angular?

2 Answers 2

Comments

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Related