There are two main ways to clear localStorage in HTML5. First, use localStorage.clear() to clear all data, which is suitable for situations where all storages under the current domain name need to be deleted at one time; second, use localStorage.removeItem('keyName') to delete data with the specified key name, which is used to clear only specific data items. In addition, it can also be combined with event listening to realize automatic cleaning when page loading or user operations, such as performing deletion or binding logout button click event trigger clearing when page loading. It should be noted that localStorage data is persistently stored and will always exist if it is not cleared. Data is isolated between different domain names. The clear() method will delete all data and is not recoverable. It should be used with caution.

There are several ways to clear localStorage in HTML5, depending on whether you want to clear all data or a specific data item. Below are some commonly used cleaning methods that are directly available.

Clear all localStorage data

If you want to clear all localStorage data stored in the user's browser at one time, you can use it directly:

 localStorage.clear();

This method will delete all data stored through localStorage under the current domain name. Note that it will not affect the data of other websites and will not prompt users to confirm, so be careful when using it.

Delete the specified key data

If you want to clear only one data, instead of all, you can use:

 localStorage.removeItem('keyName');

Replace 'keyName' with the key name you actually store. For example, you used it before:

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

Then you can use:

 localStorage.removeItem('username');

Come and delete it separately.

Automatically clean up when the page is loaded (optional)

Sometimes we want to clean up some old data when the page is loaded, such as the user does not want to retain the previous cache information after logging out. You can add clear logic to the JavaScript initialization code:

 window.addEventListener('load', function() {
    localStorage.removeItem('token');
});

Or if you are developing a logout function, you can trigger clearing when you click the "Login" button:

 document.getElementById('logoutBtn').addEventListener('click', function() {
    localStorage.removeItem('authToken');
    window.location.href = '/login.html';
});

This way, the user experience will be cleaner and avoid the residual data affecting subsequent operations.

Things to note

• localStorage is persistent, and if it is not cleared, the data will always exist.
• localStorage between different domain names are isolated and cannot be accessed from each other.
• Using the clear() method will clear all data and cannot be restored. It is recommended to call it if necessary.
• If it is just a temporary test, you can also manually view and delete it through the browser developer tools (Application panel).

Basically, that's all. The operation is not complicated but it is easy to ignore details. For example, accidentally deleting or poor clearing of range control may lead to loss of user data.

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