What is HTML5 Web Storage?

HTML5 Web Storage allows web applications to store data locally in the user's browser, providing a more efficient alternative to cookies. There are two types: 1. localStorage—stores data permanently without expiration, persisting across browser sessions until manually cleared; 2. sessionStorage—stores data temporarily for a single session, clearing it when the tab or window is closed. Both are origin-specific, offer 5–10 MB of storage, and use a simple key-value string-based API, requiring JSON.stringify() and JSON.parse() for objects. Data is not sent with HTTP requests, improving performance, but it is not secure by default and should not store sensitive information. Web storage is synchronous, client-side only, and widely supported, making it ideal for storing user preferences, form data, or login status between visits without server involvement.

HTML5 Web Storage is a feature that allows web applications to store data locally within the user's browser. Unlike cookies, which are sent with every HTTP request, web storage provides a more efficient and larger-capacity way to save data on the client side—without affecting website performance.

It’s particularly useful for maintaining state or user preferences (like theme settings, form inputs, or login status) even after the browser is closed and reopened.

There are two main types of HTML5 Web Storage:

• localStorage
  Stores data with no expiration date. The data remains even after the browser is closed and reopened. It’s specific to the origin (protocol, domain, and port) and persists until manually cleared by the user or your code.

  Example:

  

  localStorage.setItem('username', 'john_doe');
  let name = localStorage.getItem('username');

• sessionStorage
  Stores data only for a single session. The data is cleared when the browser tab or window is closed. It’s useful for temporary data that shouldn’t persist beyond the user’s visit.

  Example:

  sessionStorage.setItem('tempData', 'some value');
  let temp = sessionStorage.getItem('tempData');

Key Benefits of Web Storage

• Larger storage capacity: Typically up to 5–10 MB per origin (much more than cookies, which are limited to ~4 KB).
• Better performance: Data isn’t sent with HTTP requests, reducing bandwidth usage.
• Easy to use: Simple key-value API using strings (though you can store objects by converting to JSON).
• Client-side only: Data stays on the user’s device and doesn’t automatically sync across devices.

Things to Keep in Mind

• Web storage is origin-specific—each domain has its own separate storage.
• Data is not secure by default—never store sensitive information like passwords or tokens.
• Only strings can be stored directly. To save objects or arrays, use JSON.stringify() and JSON.parse().

Example with objects:

let user = { name: 'Alice', age: 30 };
localStorage.setItem('user', JSON.stringify(user));

let savedUser = JSON.parse(localStorage.getItem('user'));

Also, web storage operates synchronously and is available in all modern browsers, making it a reliable choice for lightweight client-side persistence.

Basically, if you need to remember something about the user during or between visits—without server involvement—HTML5 Web Storage is a straightforward and effective solution.

The above is the detailed content of What is HTML5 Web Storage?. For more information, please follow other related articles on the PHP Chinese website!