Article Categories

Selected Reading

Set the value in local storage and fetch – JavaScript?

Javascript Web Development Front End Technology Object Oriented Programming

JavaScript's localStorage provides a simple way to store data persistently in the user's browser. Use localStorage.setItem() to store values and localStorage.getItem() to retrieve them.

Syntax

// Set a value
localStorage.setItem("keyName", "value");

// Get a value
let value = localStorage.getItem("keyName");

// Remove a value
localStorage.removeItem("keyName");

// Clear all localStorage data
localStorage.clear();

Setting Values in localStorage

The setItem() method accepts two parameters: a key name and the value to store. Values are always stored as strings.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStorage Example</title>
</head>
<body>
    <input type="text" id="txtName" placeholder="Enter some value..." />
    <button onclick="saveValue()">Save to localStorage</button>
    <button onclick="getValue()">Get from localStorage</button>
    <p id="result"></p>

    <script>
        function saveValue() {
            var textBox = document.getElementById('txtName');
            var value = textBox.value;
            
            if (value) {
                localStorage.setItem("textBoxValue", value);
                document.getElementById('result').innerHTML = "Value saved: " + value;
            }
        }
        
        function getValue() {
            var savedValue = localStorage.getItem("textBoxValue");
            var resultDiv = document.getElementById('result');
            
            if (savedValue) {
                resultDiv.innerHTML = "Retrieved value: " + savedValue;
            } else {
                resultDiv.innerHTML = "No value found in localStorage";
            }
        }
    </script>
</body>
</html>

Working with Different Data Types

localStorage only stores strings. For objects and arrays, use JSON.stringify() and JSON.parse():

<!DOCTYPE html>
<html>
<head>
    <title>localStorage Data Types</title>
</head>
<body>
    <button onclick="storeObject()">Store Object</button>
    <button onclick="retrieveObject()">Retrieve Object</button>
    

    <script>
        function storeObject() {
            var user = {
                name: "John Doe",
                age: 30,
                email: "john@example.com"
            };
            
            localStorage.setItem("userData", JSON.stringify(user));
            document.getElementById('output').innerHTML = "Object stored successfully";
        }
        
        function retrieveObject() {
            var storedData = localStorage.getItem("userData");
            
            if (storedData) {
                var user = JSON.parse(storedData);
                document.getElementById('output').innerHTML = 
                    "Name: " + user.name + "<br>" +
                    "Age: " + user.age + "<br>" +
                    "Email: " + user.email;
            }
        }
    </script>
</body>
</html>

Key Points

Persistence: Data persists until explicitly removed or browser data is cleared
Domain-specific: Data is only accessible to the same origin (protocol + domain + port)
Storage limit: Usually 5-10MB depending on the browser
Synchronous: Operations are blocking and can affect performance with large data

Common Methods

Method	Purpose	Example
`setItem()`	Store a value	`localStorage.setItem("key", "value")`
`getItem()`	Retrieve a value	`localStorage.getItem("key")`
`removeItem()`	Remove a specific item	`localStorage.removeItem("key")`
`clear()`	Remove all items	`localStorage.clear()`

Error Handling

Always check if localStorage is available and handle potential errors:

<!DOCTYPE html>
<html>
<head>
    <title>localStorage Error Handling</title>
</head>
<body>
    <button onclick="safeStore()">Safe Store</button>
    

    <script>
        function safeStore() {
            var statusDiv = document.getElementById('status');
            
            try {
                if (typeof(Storage) !== "undefined") {
                    localStorage.setItem("testKey", "testValue");
                    statusDiv.innerHTML = "localStorage is supported and value stored";
                } else {
                    statusDiv.innerHTML = "localStorage is not supported";
                }
            } catch (error) {
                statusDiv.innerHTML = "Error: " + error.message;
            }
        }
    </script>
</body>
</html>

Conclusion

localStorage provides a simple way to persist data in the browser. Use setItem() to store and getItem() to retrieve values. Remember to handle errors and convert objects to JSON strings when needed.

AmitDiwan

Updated on: 2026-03-15T23:19:00+05:30

652 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next