Local storage are used to store client side data in browser and in this tutorial we will learn to use local storage in angular. Angular is a javascript framework and used to enable to seamless developer experience to build web and mobile applications. Local storage are useful when we want to store large data up to 5 mb per domain.
we can store key value in client system and javascript provides simple APIs to access the local storage feature of browser.
Difference between cookies and local storage ?
Cookies are also stored in client browser but there are some difference in local storage and cookies. Cookies can be store in browser 4,096 bytes and sent with each request to server so if the cookies are big in size than it can increase the request size too whereas local storage are big in size which is 5 mb. Local storage can only be useful when we only want store data of user or website on client side and then want to access back on client side.
Simplest way to set storage
localStorage.setItem(key,value);Simplest way to get storage
localStorage.getItem(value);So let’s start set and get use of local storage in angular
Step 1 : Create an angular app
First step is to setup an angular app using below command
ng new example-appStep 3: Create component
Now, create two components one for set the cookie and other for get the cookie in different pages
ng g c SetStorageExampleThis will create a folder in app directory named with set-cookie-example and here is component file
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-set-storage-example',
templateUrl: './set-storage-example.component.html',
styleUrls: ['./set-storage-example.component.css'],
})
export class SetStorageExampleComponent implements OnInit {
constructor() {}
ngOnInit() {
localStorage.setItem('user', 'Readerstacks');
}
}here we localstorage.setItem on ngOnInit method for demo purpose
localstorage.setItem('user', 'Readerstacks');Html to link to another page
<p>We have set local storage on this page</p>
<a routerLink="get-storage">Get storage to another page</a>Create another component to get the local storage
ng g c GetStorageExampleThis will create a folder in app directory named with get-cookie-example and here is component file
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-get-storage-example',
templateUrl: './get-storage-example.component.html',
styleUrls: ['./get-storage-example.component.css'],
})
export class GetStorageExampleComponent implements OnInit {
user: string;
constructor() {}
ngOnInit() {
this.user = localStorage.getItem('user');
}
}we fetched the stored value in local storage using this.user =localStorage.getItem('user');
Html to display name
<p>Getting storage on this page</p>
User : {{ user }}Step 4: Add routes in app routing
Finally add the routes in app.routing.module.ts to test the implementation
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SetStorageExampleComponent } from './set-storage-example/set-storage-example.component';
import { GetStorageExampleComponent } from './get-storage-example/get-storage-example.component';
@NgModule({
declarations: [SetStorageExampleComponent, GetStorageExampleComponent],
imports: [
BrowserModule,
RouterModule.forRoot([
{ path: '', component: SetStorageExampleComponent },
{ path: 'get-storage', component: GetStorageExampleComponent },
]),
],
exports: [RouterModule],
providers: [],
})
export class AppRoutingModule {}
Run the application and check implementation
Create Injectable Service to use Local Storage
We can also create a injectable service across the components so that we can reuse the service in our all components.
let’s create a service
ng g s LocalStorageimport { Injectable } from '@angular/core';
@Injectable()
export class LocalStorageService {
constructor() {}
set(key: string, value: any) {
try {
localStorage.setItem(key, JSON.stringify(value));
} catch (err) {
console.error('Error while setting local storage', err);
}
}
get(key: string): any {
try {
return JSON.parse(localStorage.getItem(key));
} catch (err) {
console.error('Error while getting local storage key ', key, err);
return '';
}
}
}
Using in component
ngOnInit() {
this.storage.set("user_object",{id:1,name:"reader",email:"info@readerstacks.com"});
}As you can see here we have set object in key value.
and get the value
ngOnInit() {
this.storage.get("user_object");
}Don’t forget to add in provider of routing module or app.module.ts file
@NgModule({
.....
providers: [LocalStorageService],
..
})Live : https://stackblitz.com/edit/set-and-get-local-storage-in-angular-readerstacks
