Local Storage in JavaScript

Introduction

In this Blog, we will cover LocalStorage in JavaScript.

LocalStorage

HTML5 specification introduces the localstorage as a way to store data with no expiration date in the web browsers.

In other words, the data stored in the browsers will persist even after you close the browser windows.
The data stored in the localStorage is bound to an origin. It means that the localStorage is unique per "protocal://host:port".
If you wish to store objects, lists, or arrays, you must convert them into a string using JSON.stringify().

Accessing LocalStorage

You can access the localStorage via the property of the window object.

Example

JavaScript

window.localStorage

window.localStorage

LocalStorage Methods

LocalStorage provides some methods and properties.

setItem(key, value)

This method i used to store a name-value pair in the localStorage.
As mentioned before, we must stringify objects before we store them in the local storage.

JavaScript

localStorage.setItem("theme","Dark");

const Employee = {
   name: "Vishal Yelve",
   phone: 12345
}

localStorage.setItem('employee', JSON.stringify(Employee));

localStorage.setItem()

getItem(key)

This method is used to access or retrieve data from the localStorage. A key is used as a parameter.
You should convert it to an object using JSON.parse() to use it in your code

JavaScript

const employee = localStorage.getItem('employee');

// {"name":"Vishal Yelve","phone":12345}

const employeeJson = JSON.parse(localStorage.getItem('employee'));

// {name: 'Vishal Yelve', phone: 12345}

localStorage.getItem()

removeItem(key)

This method is used to delete an item from localStorage. A key is used as a parameter.

JavaScript

localStorage.removeItem('them')

localStorage.removeItem()

key(index)

This method retrieves a value from a specific location. The index can be passed as a parameter.

JavaScript

let answer = localStorage.key(3);
// this statement will retrieve the value of the third item from the localStorage

localStorage.key()

clear()

This method is used to clear all values stored in local storage.

JavaScript

localStorage.clear()

localStorage.clear()

length

This property is used to get the number of name-value pairs from localStorage.

JavaScript

console.log(localStorage.length) 
// 2

localStorage.length

Loop Over keys

The following stores three name-value pairs to the localStorage.

JavaScript

localStorage.setItem('theme','light');
localStorage.setItem('backgroundColor','white');
localStorage.setItem('color','#111');

name-value

To iterate over name-value pairs stored in the localStorage, you use to Object.keys() method with for..of the loop.

JavaScript

let keys = Object.keys(localStorage);
for (let key of keys) {
  console.log(`${key}: ${localStorage.getItem(key)}`);
}

for loop

You are now familiar with the different functionalities of localStorage.
The major methods in local storage are setItem, getItem, removeItem, and clear.
A key is required when storing, retrieving, and removing items from the localStorage.
As always, I hope you enjoyed the past and learned something new.

Summary

In this blog, here we tried to understand about localStorage in JavaScript.