HTML Web Storage API

​

Himanay Khajuria

Create a Better User Experience

12 March 2025

• The Web Storage API allows storing key-value pairs in a web browser.
• It provides a simple way to store small amounts of data.
• There are two types:
• Local Storage (stores data permanently)
• Session Storage (stores data temporarily)

What is Web Storage API?

Why Use Web Storage API?

• Faster performance – Reduces server requests.
• Data persists – Local Storage keeps data even after the browser is closed.
• Works offline – Can store data for offline use.
• Simple & Secure – Only accessible via JavaScript within the same domain.

​

Local Storage vs. Session Storage

Using Local Storage (Examples)

Using Session Storage (Examples)

Storing Objects in Web Storage

Best Practices

Limitations

• Use for small data storage (5MB limit per origin).
• Do not store sensitive information (e.g., passwords, tokens).
• Use JSON.stringify() for storing objects.
• Always check if storage is available.

• Can be cleared by the user manually.
• Only accessible within the same domain.
• Not encrypted, making it vulnerable if used incorrectly.

Real-World Use Cases

• Dark mode settings – Save user’s theme preference.
• Shopping cart items – Store items temporarily before checkout.
• Form autosave – Prevent losing entered data.
• Game scores – Store user progress.

Web Storage vs. Cookies

Summary

• The Web Storage API is a simple and powerful tool.
• Local Storage persists data even after closing the browser.
• Session Storage only lasts while the tab is open.
• Follow best practices to avoid security risks.
• Useful for saving user preferences, session data, and small app state information.

Thank

You