Local Storage in JavaScript

This blog delves into the realm of LocalStorage in JavaScript. LocalStorage, a feature introduced in HTML5, serves as a valuable tool for web developers. It enables the storage of data without an expiration date in web browsers. This means that data can persist even after you close your browser window, making it perfect for retaining user preferences, session data, or other critical information.

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

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.

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

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

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

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

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

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

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

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

removeItem(key)

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

localStorage.removeItem('them')

key(index)

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

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

clear()

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

localStorage.clear()

length

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

console.log(localStorage.length) 
// 2

Loop Over keys

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

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

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

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

• 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.