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-componentStep 2: Create a Component
Create a component so we can use insert the script tag in it dynamically.
ng g c test-storageimport { 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 Storageit 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 ?
