How do you use local storage in HTML5?

Local storage in HTML5 enables persistent client-side data storage as key-value pairs. 1. Use localStorage.setItem('key', 'value') to save strings; for objects, use JSON.stringify(). 2. Retrieve data with localStorage.getItem('key') and parse objects using JSON.parse(). 3. Remove specific items via localStorage.removeItem('key'). 4. Clear all data with localStorage.clear(). 5. Loop through keys using localStorage.length and localStorage.key(i) to access each key-value pair. Storage is limited to 5–10 MB per domain, follows same-origin policy, is synchronous, has no expiration, and only supports string values, requiring JSON methods for objects; always handle cases where storage may be full or disabled.

Local storage in HTML5 allows you to store data in the user's browser that persists even after the browser is closed. It's useful for saving user preferences, form data, or any information you want to keep between sessions without sending it to the server.

Here’s how to use it:

1. Save Data with localStorage.setItem()

To store data, use the setItem() method. Both the key and value must be strings.

localStorage.setItem('username', 'john_doe');
localStorage.setItem('theme', 'dark');

If you need to store an object or array, convert it to a JSON string first:

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

2. Retrieve Data with localStorage.getItem()

Use getItem() to read data by its key. It returns null if the key doesn’t exist.

const username = localStorage.getItem('username'); // returns 'john_doe'
const user = JSON.parse(localStorage.getItem('user')); // convert back to object

3. Remove Data with localStorage.removeItem()

Delete a specific item by key:

localStorage.removeItem('username');

4. Clear All Data with localStorage.clear()

Removes all stored data for that domain:

localStorage.clear(); // removes everything

5. Check Available Keys

You can loop through all stored keys using localStorage.length and localStorage.key():

for (let i = 0; i < localStorage.length; i  ) {
  const key = localStorage.key(i);
  const value = localStorage.getItem(key);
  console.log(key, value);
}

Important Notes

• Storage Limit: Usually around 5–10 MB per domain.
• Same-Origin Policy: Data is accessible only to pages from the same origin (protocol, domain, and port).
• Synchronous: Operations block the main thread, so avoid storing very large amounts of data.
• No Expiration: Unlike cookies, data doesn’t expire unless manually removed.

You can’t store functions, DOM nodes, or complex objects directly—only strings. Always use JSON.stringify() and JSON.parse() for objects and arrays.

Basically, it’s a simple key-value store built into modern browsers. Just remember to handle cases where storage might be full or disabled.

The above is the detailed content of How do you use local storage in HTML5?. For more information, please follow other related articles on the PHP Chinese website!