How to store data in local storage in angular ?

While working in angular application we want to store data in local storage for example want to store user login data or some calculations. In this article i will show you to store objects, array, integer, string etc. in local storage.

We will going to use native API for storing the data and then fetch data again, localStorage provides a good way to store the data in local storage by which we can store data in string format.

Simple syntax for set and get local storage

localStorage.setItem("item_key","item_value");

and to get data back

localStorage.getItem("item_key");

Let’s understand it with example in angular

Step 1 : Create an angular app

First step is to setup an angular app using below command

ng new example-component

Step 2: Create a Component

Create a component so we can use insert the script tag in it dynamically.

ng g c test-storage

import { Component, OnInit, Input } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-test-storage',
  templateUrl: './test-storage.component.html',
  styleUrls: ['./test-storage.component.css']
})
export class TestStorageComponent implements OnInit {
   
  constructor() { }

  ngOnInit() {

  }

}

Step 3 : Add and get local storage

Now add the logic for set and get local storage

import { Component, OnInit, Input } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-test-storage',
  templateUrl: './test-storage.component.html',
  styleUrls: ['./test-storage.component.css']
})
export class TestStorageComponent implements OnInit {
   
  constructor() { }

  ngOnInit() {
     if(!this.getData("user")){
        this.setData("user",{id:1,name:"Loise"});
     }
  }

  saveData(key:string,value:string){
    localStorage.setItem(key,JSON.stringify(value));
  }
  getData(key:string):any{
   return JSON.parse(localStorage.getItem(key));
  }

}

Create local storage service for global use

Or we can create a separate service for storage so we can use it globally anywhere

so create a service using below command

ng generate service Storage

it will generate a class like below

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

@Injectable({
  providedIn: 'root',
})
export class StorageService {

  saveData(key:string,value:string){
    localStorage.setItem(key,JSON.stringify(value));
  }
  getData(key:string):any{
   return JSON.parse(localStorage.getItem(key));
  }
}

Here we added saveData method to store the data in local storage and also notice that we json stringify the value using JSON.strigify because using this we can store any kind of data, and same at the time of get in getData method we parsed the output.

How to store object in local storage?

As you can see we have used JSON.stringify and JSON.parse method before saving the local storage so now we can use any type of data type to store and then we can again parse them while outputting as below

saveData(key:string,value:string){
    localStorage.setItem(key,JSON.stringify(value));
  }
  getData(key:string):any{
   return JSON.parse(localStorage.getItem(key));
  }

Also Read : How to use ngFor and ngIf on same element in angular 12 ?