How to Store Data in Angular Local Storage

We will introduce how to store data in local storage in Angular.

Local Storage in Angular

Local storage is a way to store data on the client’s computer using key and value pairs in a web browser. The best thing about local storage is that there’s no expiration date for the data stored in local storage, but we can always delete it using its clear() function.

Now, to understand how we can easily store data using key and value pairs in local storage in Angular. First, we will create a function storeName() that will store the name in local storage.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  key: string = 'Name';
  myItem: string;
  storeName() {
    localStorage.setItem(this.key, 'Angular');
    this.myItem = localStorage.getItem(this.key);
  }
}

Now, we will create a template in the app.component.html file. We will create a button to store data to local storage when the user clicks on it.

#  angular
<button (click)="storeName()">Click to store name</button>

Now, let’s check how our application works now.

In the example above, when we clicked on the button, it stored the name in local storage using key and value pairs.

We will discuss deleting this data from local storage in the next step. Because if we store any sensitive data in local storage, it can be easily accessible. So it is better to delete the sensitive data after the need is fulfilled.

There are two ways to delete the data from local storage. We can either use a key to delete any specific data or delete all stored data in local storage.

We will discuss how to delete only specific data from local storage.

# angular
SpecificDelete() {
    localStorage.removeItem('Name');
  }

We will add a button with onClick action in app.component.html.

# angular
<button (click)="SpecificDelete()">Delete Name</button>

Let’s check how our application works now.

In the example above, when we click on the Delete Name button, it deletes data with key Name only.

Let’s create another function to delete all data from local storage in Angular.

# angular
deleteName() {
    localStorage.clear();
  }

Let’s create a button in the template with the onClick method.

# angular
<button (click)="deleteName()">Delete All Data</button>

Let’s check how our application works now.

In the example above, whenever we click on the Delete All Data button, it deletes all data from the local storage.