angular - How to retrieve the value from LocalStorage

Question

I'm trying to test out html5 localStorage feature. For some reason, whenever I try to retrieve a value from storage after refreshing the page, i dont get any value. Values are getting stored locally on my click functionality. But when i refresh the page, it doesnt show the values.

src/app.component.ts File

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

>export class MyItems {
  >value: string;
  >constructor(value:string){
    >this.value = value;
 > }
>}
>@Component({
  >selector: 'my-app',
  >templateUrl: './app.component.html',
  >styleUrls: [ './app.component.css' ]
>})
>export class AppComponent  {
  >title = "Working with Angular";
  >myItems: MyItems[] = new Array();
  >IsForUpdate: boolean = false;
  >newItem: any = {};
 > updatedItem;

  >constructor(){
    >this.myItems.push(    
      >new MyItems("First Value"),    
      >new MyItems("Second Value"),    
      >new MyItems("Third Value"),    
      >new MyItems("Forth Value"),    
      >new MyItems("Fifth Value")    
    >);
    >localStorage.setItem("Values", JSON.stringify(MyItems));
    >var getValues = localStorage.getItem("Values");

  >}

 >AddItem() {    
   >this.myItems.push(    
    > this.newItem    
   >);    
   >this.newItem = {};
   >localStorage.setItem('dataSource', this.newItem);
   >localStorage.getItem('dataSource');    
  // console.log(localStorage.getItem('dataSource'));
> }  


 >EditItems(i){
   >this.newItem.value = this.myItems[i].value;
   >this.updatedItem = i;
   >this.IsForUpdate = true;
 >}



> UpdateItem(){
   >let data = this.updatedItem;
   >for(let i=0; i < this.myItems.length; i++){
    > if(i == data){
      >this.myItems[i].value = this.newItem.value;
     >}
  > }
    >this.IsForUpdate = false;
   > this.newItem = {};
 >}


 >DeleteItem(i) {
  >var confirmMe = confirm('Do you want to Delete it ?');
  >if(confirmMe == true){
      >this.myItems.splice(i, 1); 
  >} else {
   > alert("You cancelled the Operation");
  >}  

>}  
>}

Answer 1

If you are trying to store arrays or objects in localStorage, you will need to convert it into a string format, as localStorage only supports the storing of string values. You can use JSON.stringify() for that purpose.

localStorage.setItem('Values', JSON.stringify(this.newItem));

localStorage.setItem('dataSource', JSON.stringify(this.items));

Likewise, when you need to retrieve the item from localStorage, you can use JSON.parse() to convert it back into an array or object.

const storedItems = JSON.parse(localStorage.getItem('dataSource'));

---

On your constructor, you are overcomplicating the way you populate your array. After populating the myItems array, you can store it in your localStorage.

On your addItem() method, you can simply push the new items to your myItems array, and call localStorage.setItem(), which will overwrite the previous value stored on your Values key.

myItems: string[] = [];

constructor(){
  console.log(JSON.parse(localStorage.getItem('Values')));

  this.myItems.push('First Value', 'First Value', 'Third Value', 'Forth Value', 'Fifth Value');
  localStorage.setItem('Values', JSON.stringify(this.myItems));
}

addItem() {
  const newItem = ''; //replace that with any value you desire
  this.myItems.push(newItem)
  localStorage.setItem('Values', JSON.stringify(this.myItems));
}