JavaScript localStorage and sessionStorage Examples

Understanding JavaScript localStorage and sessionStorage

In web development, managing data is crucial for providing a seamless user experience. JavaScript’s localStorage and sessionStorage are two powerful web storage solutions that allow you to store data in the browser. The key difference is that localStorage persists even after the browser is closed, while sessionStorage is cleared when the tab or browser is closed. In this article, we’ll explore three practical examples of how to use localStorage and sessionStorage to enhance your web applications.

Example 1: Storing User Preferences with localStorage

Use Case

Imagine you have a website where users can select their preferred theme (light or dark mode). You want to remember their choice even after they leave the site. This is a perfect scenario for using localStorage.

// Function to set the theme
function setTheme(theme) {
    localStorage.setItem('userTheme', theme);
    applyTheme(theme);
}

// Function to apply the saved theme
function applyTheme(theme) {
    document.body.className = theme;
}

// On page load, check for saved theme
window.onload = function() {
    const savedTheme = localStorage.getItem('userTheme') || 'light';
    applyTheme(savedTheme);
};

// Example of changing the theme
document.getElementById('themeToggle').onclick = function() {
    const currentTheme = localStorage.getItem('userTheme');
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    setTheme(newTheme);
};

Notes

• This example uses a button with the ID themeToggle to switch between themes.
• Ensure you have corresponding CSS styles for both themes.

Example 2: Saving Form Data Temporarily with sessionStorage

Use Case

When users fill out a form, you want to save their inputs temporarily so that if they accidentally refresh the page, their data isn’t lost. This is where sessionStorage comes in handy.

// Function to save input data
function saveInputData() {
    const name = document.getElementById('nameInput').value;
    const email = document.getElementById('emailInput').value;
    sessionStorage.setItem('name', name);
    sessionStorage.setItem('email', email);
}

// Function to load saved input data
function loadInputData() {
    const savedName = sessionStorage.getItem('name');
    const savedEmail = sessionStorage.getItem('email');
    if (savedName) document.getElementById('nameInput').value = savedName;
    if (savedEmail) document.getElementById('emailInput').value = savedEmail;
}

// Event listeners to save data on input
document.getElementById('nameInput').addEventListener('input', saveInputData);
document.getElementById('emailInput').addEventListener('input', saveInputData);

// Load data when the page is loaded
window.onload = loadInputData;

Notes

• This example assumes you have input fields with IDs nameInput and emailInput.
• The inputs are saved every time the user types in them, making it a robust solution for form handling.

Example 3: Tracking Page Visits with localStorage

Use Case

You want to track how many times a user has visited your site and display a welcome back message. You can achieve this with localStorage.

// Function to track visits
function trackVisits() {
    let visitCount = localStorage.getItem('visitCount');
    visitCount = visitCount ? parseInt(visitCount) + 1 : 1;
    localStorage.setItem('visitCount', visitCount);
    displayVisitCount(visitCount);
}

// Function to display visit count
function displayVisitCount(count) {
    const message = count === 1 ?
        'Welcome to our site for the first time!'
        : `Welcome back! You have visited this site ${count} times.`;
    document.getElementById('visitMessage').innerText = message;
}

// Track the visit when the page loads
window.onload = trackVisits;

Notes

• Ensure there’s an element with the ID visitMessage to display the message.
• This example provides a simple way to enhance user engagement by recognizing returning visitors.