How to use web storage to save data locally with HTML5

The main difference between localStorage and sessionStorage is data persistence: localStorage's data is persistent unless manually cleared, while sessionStorage's data is only valid during the current session and is cleared after closing the tab or browser; both store key-value pairs in string form, and objects or arrays can be stored and read through JSON.stringify() and JSON.parse() methods; typical application scenarios include saving user preferences (such as topic settings) using localStorage, or using sessionStorage to achieve automatic recovery of form drafts; when using browser support, avoid storing sensitive information to prevent XSS attacks, and ensure that values that may be null are safely parsed, thereby achieving lightweight data persistence on the client.

Web Storage is a feature in HTML5 that allows you to store data directly in the user's browser. Unlike cookies, it's easier to use, has a larger storage capacity (typically 5–10 MB), and doesn't get sent with every HTTP request. There are two main types: localStorage and sessionStorage . Here's how to use them effectively.

What's the difference between localStorage and sessionStorage?

• localStorage : Data persists even after the browser is closed. It stays until explicitly cleared.
• sessionStorage : Data is only available for the duration of the page session. It's cleared when the tab or browser is closed.

Both store data as key-value pairs, and only support strings. But with a little extra work, you can save more complex data like objects or arrays.

How to save and retrieve data

Basic operations

You can use simple methods to interact with web storage:

 // Save data
localStorage.setItem('username', 'john_doe');
sessionStorage.setItem('tempNote', 'Buy groceries');

// Retrieve data
const user = localStorage.getItem('username');
const note = sessionStorage.getItem('tempNote');

// Remove data
localStorage.removeItem('username');
sessionStorage.removeItem('tempNote');

// Clear all data
localStorage.clear();
sessionStorage.clear();

These methods are straightforward and work well for simple strings.

Storing objects or arrays

Since web storage only handles strings, you need to convert objects or arrays using JSON.stringify() and JSON.parse() .

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

// Retrieve and parse
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // Output: Alice

// Save an array
const tasks = ['Read docs', 'Write code', 'Test app'];
localStorage.setItem('tasks', JSON.stringify(tasks));

// Retrieve array
const storedTasks = JSON.parse(localStorage.getItem('tasks'));

Always wrap JSON.parse() in a check, in case the value is null:

 const storedUser = localStorage.getItem('user');
const user = storedUser ? JSON.parse(storedUser) : null;

Practical use cases and tips

• User preferences : Save theme settings, language, or layout choices.

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

• Form recovery : Use sessionStorage to save form input as the user types.

   document.getElementById('message').addEventListener('input', function(e) {
    sessionStorage.setItem('draft', e.target.value);
  });

  Then restore it:

   const draft = sessionStorage.getItem('draft');
  if (draft) document.getElementById('message').value = draft;

• Check for availability : Always verify that web storage is supported and accessible (eg, some browsers block it in private mode).

   function isStorageAvailable(type) {
    try {
      const storage = window[type];
      const x = '__storage_test__';
      storage.setItem(x, x);
      storage.removeItem(x);
      return true;
    } catch (e) {
      return false;
    }
  }
  
  if (isStorageAvailable('localStorage')) {
    // Safe to use localStorage
  }

  ---

  Limitations and considerations

  • Storage limits : While generous, exceeding them can cause errors.
  • Security : Never store sensitive data like passwords or tokens—web storage is accessible via JavaScript, making it vulnerable to XSS attacks.
  • Scope : Data is tied to the origin (protocol, domain, port). One site can't access another's stored data.
  • Synchronous : Operations block the main thread, but for small data, this isn't an issue.

  ---

  Using web storage is simple and effective for client-side persistence. Stick to localStorage for long-term data and sessionStorage for temporary, session-specific info. Just remember to serialize non-string data and handle edge cases gracefully.

  Basically, it's a lightweight way to make your web apps remember things—without needing a server.

  The above is the detailed content of How to use web storage to save data locally with HTML5. For more information, please follow other related articles on the PHP Chinese website!