localStorage is used to store data for a long time, and the data is not lost after closing the browser; sessionStorage is used to store during the session and clear after closing the page. Both operate string data through setItem, getItem, etc., and the stored object needs to be converted using JSON.stringify. 1. localStorage is suitable for user settings, long-term caching, and login status maintenance; 2. sessionStorage is suitable for temporary communication, current session cache, and sensitive information storage. Pay attention to avoid misuse of localStorage to store sensitive information, pay attention to storage size limitations, same-origin policies, complex data update mechanisms and cross-label synchronization issues.

The browser's JavaScript provides two APIs: localStorage and sessionStorage , which are used to store data on the client side. The difference is the life cycle of the data: localStorage is permanently saved until manually cleared, while sessionStorage is only valid during the current session and will be cleared after closing the page or tab.

These two tools are very useful if you need to persist some user settings, cache content, or pass data across pages. Let’s talk about how to use them well from the perspective of actual use.

Basic usage: add, delete, modify and check

Whether it is localStorage or sessionStorage , the basic operation method is the same:

• Store data: setItem(key, value)
• Get data: getItem(key)
• Delete data: removeItem(key)
• Clear all: clear()
• Get all keys: key(index)

For example:

 // Store localStorage.setItem('theme', 'dark');
sessionStorage.setItem('token', 'abc123');

// Read const theme = localStorage.getItem('theme'); // 'dark'

// Delete localStorage.removeItem('theme');

// Clear sessionStorage.clear();

Note that these methods can only store strings. If you want to save an object or an array, you need to convert it with JSON.stringify() and then save it. When reading it, then JSON.parse() it back.

Comparison and suggestions for use scenarios

Although the APIs of the two are the same, the applicable scenarios are different:

• localStorage :

  • User preferences (such as topics, languages)
  • Long-term cache of data (such as history)
  • Login status remains (combined with token)

• sessionStorage :

  • Temporary communication between pages (such as multi-step form)
  • Data cache for the current session (don't want cross-page pollution)
  • Sensitive information (such as one-time tokens) and do not want to stay in the browser for a long time

A common misuse is to store sensitive data in localStorage , and forget to clean it up, which can easily lead to leakage. If you only need one-time data sharing, it is recommended to use sessionStorage .

Notes and FAQs

Although it is easy to use, some details are easy to get stuck:

• Data size limit: Usually each source has a maximum of about 5MB, and an error will be reported if it exceeds it.
• Same-origin policy restrictions: Only access storage under the same protocol, domain name, and port.
• It does not support listening for complex data changes: when modifying an object, you must write it back in the entire process.
• Synchronous updates between multiple tabs require listening to events.

For example, if you change the localStorage value on one tab, another tab can respond to changes by listening to storage events:

 window.addEventListener('storage', (event) => {
  if (event.key === 'theme') {
    console.log('Theme has been changed to:', event.newValue);
  }
});

However, this event will not be triggered on the current page, and will only take effect in other open same-origin pages.

Basically that's it. By mastering these points, you can use local storage reasonably in the project. The key is to distinguish when to use localStorage , when to use sessionStorage , and to handle the data format and boundary situations.

The above is the detailed content of Working with localStorage and sessionStorage in Browser JavaScript. For more information, please follow other related articles on the PHP Chinese website!