The difference and usage of LocalStorage and SessionStorage in vue

Earlier, I sorted out the background verification mechanism, mainly the use of Cookies, Sessions and Tokens, Django: Cookie settings and cross-domain problem handling, Django implementation: Cookies with Sessions, Django: Token-based verification. Of course, this does not mean that Token is the best. It still needs to be selected according to project requirements, and can also be mixed and used.

What we are going to do today is to store the Token sent from the background in the client. This can be stored in Cookies, LocalStorage, SessionStorage and other places. Cookies have been introduced before, so we will ignore them here. We will mainly talk about LocalStorage and SessionStorage.

What is LocalStorage

LocalStorage is translated as "local storage". It is a new storage object in HTML5. Like Cookie, it is also used for local storage, but it solves the problem of insufficient storage space for Cookie (each cookie has 4k storage space), while localStorage browsers generally support 5M and are usually stored in the form of key/value pairs.

What is SessionStorage

SessionStorage is translated as "session storage" and is also a new storage object added to HTML5. It is used to temporarily store data in the same window locally. The data will be deleted after the window is closed. SessionStorage browsers generally support 5M and are usually stored in the form of key/value pairs.

Difference between LocalStorage and SessionStorage

The LocalStorage life cycle is permanent. Unless you actively clear the LocalStorage information, the information will always be stored on the client. The SessionStorage life cycle is temporary and is only valid in the current session window. The data will be automatically cleared when the page or browser is closed.

Characteristics of LocalStorage and SessionStorage

1. Data in LocalStorage or SessionStorage cannot be shared between different browsers.

2. LocalStorage and SessionStorage can use a unified API interface.

3. LocalStorage or SessionStorage usually stores data in the form of key/value pairs, so the data format needs to be converted during storage. Use the JSON.stringify method to convert the object into a string, and use the JSON.parse method to convert the string into an object during extraction.

4. LocalStorage or SessionStorage is a new attribute of HTML5, so it requires support from newer browsers.

Usage of LocalStorage and SessionStorage

Because the application of LocalStorage is the same as that of SessionStorage, I will not explain it here. I will take LocalStorage as an example.

LocalStorage provides 5 methods, namely clear (clear LocalStorage), getItem (get local data), key (get the value of the key corresponding to the subscript), removeItem (delete to save data), and setItem (set to save data).

The following are specific usage methods and instructions. You can directly use localStorage. to bring out the corresponding methods. We can use them as long as we understand their corresponding application properties.

In this way, we can use localStorage.setItem('key', 'value') to store the data sent by the server locally on the client. Remember to convert the data before storage.

LocalStorage and SessionStorage application examples

Below is the application I am actually developing. Earlier, I sent JSON data to the front end through JsonResponse, which contained data (data requested by the user), token (token generated by the server) and code (status code processed by the background). After receiving this data, the front end processes the data and determines whether the code return is successful. If successful, we parse the data and store it locally, otherwise the access fails.

Here I use localStorage and sessionStorage to store two data respectively. LocalStorage is customized, and sessionStorage is obtained from the background. Open the browser developer tools. In Application, we can find the corresponding values ​​​​we stored in localStorage and sessionStorage under Storage.

This concludes this article about the differences and usages of LocalStorage and SessionStorage in vue. For more relevant vue LocalStorage and SessionStorage content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!