Skip to main content
session-storage-localstorage-angular4

How to Use LocalStorage and SessionStorage In Angular 8

This tutorial help to create a simple angular 4 application with localstorage. This application will use webstorage service plugin to store variable data in the browser, which can use HTML 5 local storage, Session storage, or In-memory mechanism to store data.

You can also implement session-storage and localstorage into angular 8 , angular 9 version by following of the same process, which is mentioned in this tutorial.

Sometimes we need to store data in the client-side to use that data into the subsequent call, Like user token into session variable or local storage.

You can store data serverside but it’s costly in terms of application performance, Each time you need to fetch data from the server. You can use this option if it has a security risk to storing data on the client side.

There are the following ways to store data on client side.

  • In Memory : You can store data in client-side computer memory.
  • Session Storage : This maintains a separate storage area for each given origin that’s available for the duration of the page session. This session will flush when the tabs are closed.
  • Local Storage : Store data into client-side browser using HTML5, It supports only all modern browsers. It’s the same as session storage but persists more than even the browser is closed and reopened.

Checkout Other Angular 4 tutorials,

We will use Angular 8 webstorage service packages to store data locally, This package provides service wrappers for the Web Storage API. You can get more information from of angular webstorage service from Here

Angular 4 Localstorage Example

Let’s start to create a simple angular application, if you haven’t started angular yet, don’t worry, we have Getting Started with angular 4 article to help angular beginners.

I am assuming, You have created a sample angular 8 application using the above article, Now install angular-webstorage-service package using npm command.

npm install --save angular-webstorage-service

We will import module in app.module.ts file.

import { StorageServiceModule} from 'angular-webstorage-service';

imports: [
    BrowserModule,
	StorageServiceModule
  ]

We will use service to store data in local storage or session, we will add below code into app.components.ts file.
import {LOCAL_STORAGE, WebStorageService} from 'angular-webstorage-service';

If you want to store data into session then replace LOCAL_STORAGE to SESSION_STORAGE.

We are trying to store data into local storage in a key-value pair into the array, so we will create a class level scope empty array.

public data:any=[]

We will inject localstorage service and webstorgae service into constructor.

constructor(@Inject(LOCAL_STORAGE) private storage: WebStorageService) {
     
}

How to Set data into LocalStorage or Session Storage

We will use set() method to store data into localstorage, we will pass key name to identify variable and assign a value param.

saveInLocal(key, val): void {
    console.log('recieved= key:' + key + 'value:' + val);
    this.storage.set(key, val);
    this.data[key]= this.storage.get(key);
   }

We have saved data into the localstorage and set data into array type data variable to display in the UI.

How to Get data from LocalStorage or Session Storage

We will use get method to fetch data from localstorage, we will pass key name to get() method to get data from local storage in angular 8 application.

getFromLocal(key): void {
    console.log('recieved= key:' + key);
    this.data[key]= this.storage.get(key);
    console.log(this.data);
   }

Conclusions:

We have created a simple angular8 application using CLI, We have implemented local storage functionality into this angular application, saved the data using setter and getter method. You can also create your own angular injectable service to handle local storage anywhere into your angular 8 application.

2 thoughts to “How to Use LocalStorage and SessionStorage In Angular 8”

Leave a Reply

Your email address will not be published. Required fields are marked *