JavaScript LocalStorage, SessionStorage

❮ Prev Next ❯

In the realm of web development, storing data efficiently and securely on the client's side is paramount. JavaScript provides two powerful tools, LocalStorage and SessionStorage, for this purpose. This article delves deep into these technologies, offering practical code examples and expert insights to empower developers to leverage these features to their fullest potential.

Never store sensitive information or personal data in localStorage or sessionStorage without encryption!

Understanding LocalStorage in JavaScript

LocalStorage allows you to store data on the user's browser persistently, with no expiration date. This means the data stored in LocalStorage will remain available even after the browser window is closed and reopened.

How to Use LocalStorage

Here's a simple example to demonstrate how to store data in LocalStorage. You can set any key and value pair by the setItem method, and read any value by it's key using the getItem method. There is also the removeItem method to remove a pair by the key.

// Storing data localStorage.setItem('username', 'JohnDoe'); // Retrieving data let user = localStorage.getItem('username'); console.log(user); // Output: JohnDoe // Removing data localStorage.removeItem('username'); user = localStorage.getItem('username'); console.log(user);

Practical Application: Creating a Theme Switcher Using LocalStorage

Consider a scenario where you want to save the user's preferred theme (light or dark) so that it persists across sessions.

<style>
    :root {
        --bg-color: #ffffff;
        --text-color: #000000;
    }
    .dark {
        --bg-color: #333333;
        --text-color: #ffffff;
    }
    body {
        background-color: var(--bg-color);
        color: var(--text-color);
        transition: background-color 0.5s, color 0.5s;
    }
    button {
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
    }
</style>
</head>
<body>
<button onclick="toggleTheme()">Toggle Theme</button>
<script>
    function setTheme(themeName) {
        localStorage.setItem('theme', themeName);
        document.documentElement.className = themeName;
    }

    function toggleTheme() {
        var currentTheme = localStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
        if (currentTheme === 'light') {
            setTheme('dark');
        } else {
            setTheme('light');
        }
    }

    function loadTheme() {
        var theme = localStorage.getItem('theme') || 'light';
        setTheme(theme);
    }

    // Initial theme load
    loadTheme();
</script>
</body>

Try it Yourself »

This script checks for a stored theme in LocalStorage or defaults to 'light'. It then applies the theme by setting the class name of the root HTML element, allowing CSS to adjust the styles accordingly.

SessionStorage: Temporary Data Storage in JavaScript

While LocalStorage is designed for storing data with no expiration, SessionStorage provides a way to store data for the duration of the page session. Data stored in SessionStorage is cleared when the page session ends — that is, when the browser is closed.

How to Use SessionStorage

Below is a basic example of using SessionStorage. As you can see, the methods and syntax is quite the same as localStorage. The difference is in the manner of expiration, as explained above.

// Storing data sessionStorage.setItem('sessionName', 'SessionData'); // Retrieving data let data = sessionStorage.getItem('sessionName'); console.log(data); // Output: SessionData // Removing data sessionStorage.removeItem('sessionName'); data = sessionStorage.getItem('sessionName'); console.log(data); // Output: SessionData

Example: Using SessionStorage in a Form Data Auto-Save Feature

Imagine you have a form that a user might fill out, but there’s a risk they might close their browser by accident. You can use SessionStorage to temporarily save the form data.

<body>
    <div>Start writing an email address in the following input. Refresh the page in the middle of your typing, and you'll see that the page remembers what you entered before.</div>
    <br />
    <input type="email" id="email"/>
</body>
<script>
window.onload = function() {
    const email = sessionStorage.getItem('email');
  
    if (email) {
        alert('email found from session storage: ' + email);
        document.getElementById('email').value = email;
    }

    document.getElementById('email').onkeyup = function() {
        sessionStorage.setItem('email', this.value);
    };
};
</script>

Try it Yourself »

This code automatically loads any saved email when the page is loaded and updates the SessionStorage item whenever the email field changes. To test it, click on the "try it yourself" button, write something in the input, and then refresh the page. The value will remain there after a refresh.

Always consider the size limitations before storing any data (typically 5MB for both LocalStorage and SessionStorage).

Conclusion

LocalStorage and SessionStorage offer powerful options for enhancing user experience by efficiently managing data in web applications. By understanding their capabilities and limitations, developers can make informed decisions on how best to use these tools in their projects.

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.