What is localstorage in javascript?

View Discussion

Table of Contents Show

Why do we need local storage in JavaScript?
When should you use localStorage?
What do you mean by local storage?
Is localStorage a cookie?

Improve Article

Save Article

Read

Discuss

View Discussion

Improve Article

Save Article

JavaScript is one of the world’s most popular lightweight, interpreted compiled programming languages. It is synchronous and single-threaded. In JavaScript, the programs are called scripts. These scripts are executed as plain text. We can write them directly on our HTML page or use an external Javascript file. JavaScript can execute in the browser, and also on the server, or actually on any device that has a special program called the JavaScriptengine. JavaScript is used for both client-side and server-side developments.

HTML DOM Window localStorage is provided by Browser and it allows us to store data as key-value pairs in our web browser using an object. The localStorage is the read-only property of the window interface.

Data is stored as key-value pair and the keys are unique. The keys and the values are always in the UTF-16 DOM String format that is stored within localStorage.

The main features of localStorage are:

The storage is the origin(domain) bounded.
The data will not get deleted even if the browser is closed or even OS reboot and will be available until we manually clear theLocal Storage of our Browser.

Syntax:

ourStorage = window.localStorage;

The above will return a storage object which can be used to access the current origin’s local storage space.

Properties and methods provided by the localStorage object:

setItem( key , value ): stores key/value pair
getItem( key ): returns the value in front of key
key( index ): get the key on a given index
length: returns the number of stored items(data)
removeItem( key ): removes given key with its value
clear(): deletes everything from the storage

Example: The following snippet accesses the current domain’s localStorage object.

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible"

content="IE=edge">

<meta name="viewport" content=

"width=device-width, initial-scale=1.0">

<title>JavaScript localStorage</title>

<style>

div {

width: 300px;

height: 200px;

padding: 20px;

border: 2px solid black;

background-color: green;

color: white;

margin: auto;

text-align: center;

font-size: 1.5rem;

}

.box {

box-sizing: border-box;

}

</style>

</head>

<body>

<div class="box">GeeksforGeeks</div>

<script>

// Saving data as key/value pair

localStorage.setItem("name", "GeeksforGeeks");

localStorage.setItem("color", "green");

// Updating data

localStorage.setItem("name", "GeeksforGeeks(GfG)");

localStorage.setItem("color", "Blue");

// Get the data by key

let name = localStorage.getItem("name");

console.log("This is - ", name);

let color = localStorage.getItem("color");

console.log("Value of color is - ", color);

// Get key on a given position

let key1 = localStorage.key(1);

console.log(key1);

// Get number of stored items

let items = localStorage.length;

console.log("Total number of items is ", items);

// Remove key with its value

localStorage.removeItem("color");

// Delete everything

localStorage.clear();

</script>

</body>

</html>

Output:

Note: To view the data in the browser’s Local Storage, do the following.

Open your code in the browser.
Right-Click And Click on Inspect.
Then go to the Applications tab on the toolbar.

Saving data as key/value pair

Updating data

Get data, index of a key, and number of stored items

Remove a key with its value

Delete everything in storage

Why do we need local storage in JavaScript?

Local storage allows developers to store and retrieve data in the browser. The data stored in local storage will not expire. This means the data will persist even if the tab or the browser window is closed.

When should you use localStorage?

To keep it short, here's the only situation in which you should use local storage: when you need to store some publicly available information that is not at all sensitive, doesn't need to be used in a high performance app, isn't larger than 5MB, and consists of purely string data.

What do you mean by local storage?

A hard drive or solid state drive (SSD) directly attached to the device being referenced. The term would be used to contrast the storage in that unit from the storage on servers in the local network or on the Internet (see SAN, NAS and cloud storage).

The two have different purposes, and hence different strengths and weaknesses. Cookies are intended to be read by the server, whereas localStorage can only be read by the browser. Thus, cookies are restricted to small data volumes, while localStorage can store more data.