How to use Angular Local Storage in Simplest Way?

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-app

Step 3: Create component

Now, create two components one for set the cookie and other for get the cookie in different pages

ng g c SetStorageExample

This 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 GetStorageExample

This 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 LocalStorage

import { 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

Also Read:

How to set and get cookies in angular ?

Difference between cookies and local storage ?

Simplest way to set storage

Simplest way to get storage

Create Injectable Service to use Local Storage

Also Read:

Related Posts