How to work with localStorage and sessionStorage in HTML5

localStorage and sessionStorage are client storage solutions provided by HTML5. The former persists data, while the latter is only valid during the session. Both store key-value pairs in the form of strings, and need to use JSON.stringify and JSON.parse to process objects. They are suitable for storing user preferences or temporary form data. However, attention should be paid to data type conversion, storage restrictions and security, avoid saving sensitive information, and realize data synchronization between multiple tabs through storage events. Null values and exceptions must be properly handled during use to ensure robustness.

Working with localStorage and sessionStorage in HTML5 is a straightforward way to store data on the client side. These web storage APIs provide a simple key-value store that's more independent and secure than using cookies. While they're similar in API, they differ in persistence and scope.

Understanding localStorage and sessionStorage

• localStorage : Stores data with no expiration date. The data remains even after the browser is closed and reopened. It's scoped to the origin (protocol, host, and port), meaning pages from the same domain can access the same localStorage.

• sessionStorage : Stores data only for the duration of the page session. The data is cleared when the browser tab or window is closed. Like localStorage, it's also origin-scoped, but each tab has its own separate sessionStorage.

Both store data as strings, so if you want to save objects or arrays, you'll need to use JSON.stringify() and JSON.parse() .

Basic Operations: Save, Retrieve, Update, and Delete

The syntax for both localStorage and sessionStorage is identical. Just replace localStorage with sessionStorage depending on your needs.

Save data (setItem)

 // Store a string
localStorage.setItem('username', 'john_doe');

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

Retrieve data (getItem)

 // Get a string
const username = localStorage.getItem('username');

// Get and parse an object
const user = JSON.parse(localStorage.getItem('user'));

Note: getItem() returns null if the key doesn't exist. Always check for null before parsing JSON to avoid errors.

Update data

Just use setItem() again with the same key:

 localStorage.setItem('username', 'jane_doe');

Delete data (removeItem)

 // Remove a single item
localStorage.removeItem('username');

// Clear all data
localStorage.clear();

Same methods apply to sessionStorage .

Handling Data Types and Common Pitfalls

Since storage only supports strings, handling non-string types require care.

• Numbers, booleans, objects, arrays must be converted:

   localStorage.setItem('count', 5); // stored as string "5"
  const count = Number(localStorage.getItem('count')); // convert back

• Objects and arrays :

   const tasks = ['Buy milk', 'Walk dog'];
  localStorage.setItem('tasks', JSON.stringify(tasks));
  
  const savedTasks = JSON.parse(localStorage.getItem('tasks')) || [];

Always wrap JSON.parse() in a try-catch or fallback, especially if the stored value might be malformed or null.

Use Cases and Best Practices

• Use localStorage for :

  • User preferences (theme, language)
  • Caching user data that persists across sessions
  • Offline data saving (eg, draft blog posts)

• Use sessionStorage for :

  • Temporary form data
  • Data that should not persist beyond the tab (eg, multi-step wizards)
  • Sensitive info you don't want lingering after the session ends

Tips:

• Avoid storing sensitive data like passwords or tokens — it's not secure.
• Watch for storage limits (typically 5–10MB per origin).
• Listen for storage events to sync data across tabs:

   window.addEventListener('storage', (e) => {
    console.log('Storage changed:', e.key, e.newValue);
  });

  Note: This event only fires in other tabs, not the one making the change.

  Basically, localStorage and sessionStorage are easy to use but require attention to data types and lifecycle. Use them wisely, and always handle edge cases like missing keys or invalid JSON.

  The above is the detailed content of How to work with localStorage and sessionStorage in HTML5. For more information, please follow other related articles on the PHP Chinese website!