Best Practice for Localstorage in Angular

Best Practice for Localstorage in Angular - The Rich Post


Hello to all, welcome to Today In this post, I will tell you, Best Practice for Localstorage in Angular.

I am doing this functionality in angular 6 application.

Localstorage is use to store data with no expiration date. We will manually destroy it.

In this post, I am creating and deleting the local storage data and it is easy to use.

Here is the working Image just for testing:


Best Practice for Localstorage in Angular


In above picture, there are two buttons, Get item and Delete item:

Get Item is set the value for variable.

Delete Item is remove the value from variable.


Here is the working and tested code, you need to follow:


1. First, you need to write below code into yours app.component.ts file:

Here,  we will set the localstorage data and also delete it:

import {Component} from '@angular/core';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  get dataV(): any {
    return localStorage.getItem('blog');
    localStorage.setItem('blog', '');


2. Second, you need write below code into your app.component.html file:

In this file, we will make the buttons and get the localstorage data:

<div class="jumbotron text-center">
  <h1>Angular LocalStorage
<div class="container">
<button (click)="get()">Get Item</button><br><br>
<button (click)="delete()">Delete Item</button>
<h1>{{ dataV }}</h1>


If you have any query related to this post, then do comment below or ask questions.

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to Myself Ajay Malhotra and I am full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Positive SSL