How To use Html5 local Storage in Angular 16

This angular tutorial help to how to use HTML5 Local Storage in Angular 16. The angular 16 is the latest stable version of angular. You can apply the same principles to future versions of Angular.

The localStorage is a common mechanism of a browser’s web storage. It allows users to save data as key–value pairs in the browser for later use.

We can access a browser’s Storage object via localStorage. The Storage object includes methods for saving, reading, and removing data, among other things.

There are two variants of local storage available:

sessionStorage: The Session storage data is available only to the same browser window.
localStorage: The data is available in browser windows with the same origin (domain).

Checkout Other Localstorage tutorials,

HTML5 LocalStorage

You can save data locally in a user’s browser by using Angular’s HTML5 Local Storage feature. This functionality is helpful in situations where it’s necessary to store user preferences or persist data across multiple sessions.

How To Use HTML5 LocalStorage With Angular

Let’s create an angular sample app to use LocalStorage to store and retrieve data. We’ll perform various operations such as setting, getting, and removing data.

Step 1: Import the Required Modules –

You need to import the necessary modules in your Angular component. You’ll need the DOCUMENT module from @angular/common to access the browser’s localStorage. Add the following import statement at the top of your component file:

import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

Step 2: Inject the DOCUMENT Token
Let’s inject the DOCUMENT token into your component’s constructor. The DOCUMENT token represents the browser’s document object, which includes the localStorage property.

constructor(@Inject(DOCUMENT) private document: Document) { }

How To Store Value in HTML5 LocalStorage

You can now access the localStorage property of the document object. To set an item in Local Storage, use the setItem() method:

localStorage.setItem('myKey', 'myValue');

This code stores the value ‘myValue’ with the key ‘myKey’ in the Local Storage

How To Get Value From LocalStorage

To retrieve an item from Local Storage, use the getItem() method

const value = localStorage.getItem('myKey');

The above code get the value of the key ‘myKey’ from Local Storage and assigns it to the value variable.

How To remove Value From LocalStorage

To remove an item from Local Storage, use the removeItem() method:

localStorage.removeItem('myKey');

The above code removes the item with the key ‘myKey’ from Local Storage.

Angular Service For HTML5 LocalStorage

The angular Service is simple to use and can be readily injected into different components, encouraging maintainability and code reuse. Create a new service file local-storage.service.ts, and define a service class with methods for setting, getting, and removing items from Local Storage:

import { Injectable, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Injectable()
export class LocalStorageService {

  constructor(@Inject(DOCUMENT) private document: Document) { }

  setItem(key: string, value: string): void {
    localStorage.setItem(key, value);
  }

  getItem(key: string): string | null {
    return localStorage.getItem(key);
  }

  removeItem(key: string): void {
    localStorage.removeItem(key);
  }
}

Let’s inject above the service in the component’s providers array. The LocalStorageService is used to interact with Local Storage.

import { Component } from '@angular/core';
import { LocalStorageService } from './local-storage.service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  providers: [LocalStorageService]
})
export class MyComponent {

  constructor(private localStorageService: LocalStorageService) { }

  // Use the LocalStorageService methods as needed
}

Conclusion:

The HTML5 Local Storage in Angular allows you to store and retrieve data locally in the user’s browser. You can directly access Local Storage using the localStorage object or encapsulate the operations in a service, this feature provides a convenient way to persist data and enhance the user experience.