Difference between Session Storage and Local Storage in HTML5

HTML5 provides two web storage mechanisms: Session Storage and Local Storage. Both allow web applications to store data locally in the user's browser, but they differ in scope and persistence.

Session Storage

Session Storage is designed for scenarios where the user is carrying out a single transaction but could be carrying out multiple transactions in different windows at the same time. Data stored in Session Storage is only available for the duration of the page session.

<script>
// Store data in Session Storage
sessionStorage.setItem("username", "john_doe");
sessionStorage.setItem("theme", "dark");

// Retrieve data from Session Storage
console.log("Username:", sessionStorage.getItem("username"));
console.log("Theme:", sessionStorage.getItem("theme"));

// Remove specific item
sessionStorage.removeItem("theme");

// Clear all session storage
sessionStorage.clear();
</script>

Username: john_doe
Theme: dark

Local Storage

Local Storage is designed for storage that spans multiple windows and lasts beyond the current session. Web applications may wish to store megabytes of user data, such as entire user-authored documents or a user's mailbox, on the client side for performance reasons.

<script>
// Store data in Local Storage
localStorage.setItem("userPreferences", JSON.stringify({
    language: "en",
    notifications: true
}));

// Retrieve and parse data
const preferences = JSON.parse(localStorage.getItem("userPreferences"));
console.log("Language:", preferences.language);
console.log("Notifications:", preferences.notifications);

// Check if item exists
if (localStorage.getItem("userPreferences")) {
    console.log("User preferences found");
}

// Get storage length
console.log("Items in storage:", localStorage.length);
</script>

Language: en
Notifications: true
User preferences found
Items in storage: 1

Key Differences

Practical Example

<script>
// Session Storage - temporary shopping cart
sessionStorage.setItem("cart", JSON.stringify([
    {id: 1, name: "Laptop", price: 999},
    {id: 2, name: "Mouse", price: 25}
]));

// Local Storage - user settings that persist
localStorage.setItem("settings", JSON.stringify({
    darkMode: true,
    language: "en",
    autoSave: true
}));

// Demonstrate persistence difference
console.log("Session cart:", sessionStorage.getItem("cart"));
console.log("Persistent settings:", localStorage.getItem("settings"));

// Session data will be lost when tab closes
// Local data persists until manually removed
</script>

Session cart: [{"id":1,"name":"Laptop","price":999},{"id":2,"name":"Mouse","price":25}]
Persistent settings: {"darkMode":true,"language":"en","autoSave":true}

Browser Compatibility

Both Session Storage and Local Storage are well-supported across modern browsers. They provide the same API methods: setItem(), getItem(), removeItem(), and clear().

Conclusion

Use Session Storage for temporary data that should be isolated per tab, and Local Storage for persistent data that should survive browser sessions. Both provide efficient client-side storage without server requests.