localStorage is used to store data for a long time, and sessionStorage is used to store temporary during sessions. 1. Both use setItem() and getItem() to access data, but can only store strings. Objects or arrays need to be converted through JSON.stringify() before storage. 2. You can delete a single item through removeItem() and clear() to clear all data, especially for localStorages that will not expire automatically. 3. localStorage is suitable for saving long-term data such as user preferences, and sessionStorage is suitable for saving temporary data such as form progress. 4. Pay attention to security issues such as capacity limitation (about 5MB), homologous policies, synchronous operations may affect performance and inability to store sensitive information during use.

Local storage is a very practical feature in front-end development, allowing us to save data in the browser. localStorage and sessionStorage are two commonly used Web Storage APIs. They are not difficult to use, but some details still need to be paid attention to.

Simply put: if you want the data to be kept until it is manually cleared, use localStorage ; if you just want to use it during the current session, close the page and clear it, select sessionStorage .

1. Basic usage: Save and fetch

Whether it is localStorage or sessionStorage , the operation method is almost exactly the same. The most commonly used methods are setItem() and getItem() :

 // Store data localStorage.setItem('username', 'john_doe');
sessionStorage.setItem('token', 'abc123');

// Get data const user = localStorage.getItem('username');
const token = sessionStorage.getItem('token');

It should be noted that only strings can be stored . If you want to save objects or arrays, you have to use JSON.stringify() to convert them first:

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

// parse it back when fetching const storedUser = JSON.parse(localStorage.getItem('user'));

2. Delete and clean data

Sometimes you may want to actively delete some data or clear all of them. You can use the following methods:

• Delete an item:

   localStorage.removeItem('username');
  sessionStorage.removeItem('token');

• Clear all data:

   localStorage.clear();
  sessionStorage.clear();

  This is especially important for localStorage because it will not expire automatically, and if it is unclear, the data will always be there.

  ---

  3. Differences in usage scenarios

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

  • localStorage is more suitable for long-term preservation of user preferences, theme settings, login status, etc. For example, remember the dark mode selected by the user last time, and you can still remember it when you open the website next time.

  • sessionStorage is more suitable for temporary data, such as refreshing the page in the form and not wanting the user to refil, or recording the status of the current page, and automatically releasing resources after closing the tab.

  For example: You are working on an online exam system. When the user answers halfway through the answer, you can save the answering progress with sessionStorage so that data will not be lost even if the refresh is refreshed.

  ---

  4. Precautions and limitations

  Although these two tools are very useful, there are some limitations and precautions:

  • Capacity limit : Usually there is about 5MB of space under each domain name (different browsers may be different), and cannot be used to store a large amount of data such as pictures or files.

  • Same-origin policy : Only pages with the same protocol, the same domain name, and the same port can access the same data. For example, http://example.com and https://example.com are different.

  • Synchronous operation : Read and write operations are synchronous, and frequent and large amounts of operations may affect performance, especially on mobile.

  • Security issues : Don’t directly store sensitive information (such as passwords) here, because it is plain text and is easily stolen by XSS attacks.

  ---

  Basically that's it. Using localStorage and sessionStorage can make your web page experience smoother, but don’t forget to control the amount of data and pay attention to safety.

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