JavaScript localStorage

Last Updated : 25 Apr, 2023

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. LocalStorage is a type of web storage for info. As a result, JavaScript websites and applications can store and access data without any time limits. The data will therefore always be preserved and never expire. Thus, the information saved in the browser will remain accessible even after the browser window is closed.

The storage limit for local storage is greater than that for cookies (5MB vs. 4MB). Additionally, it is not always provided together with HTTP requests. This makes it a superior option for client-side storage right now.

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 local storage 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 the Local 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>