Shulou(Shulou.com)06/03 Report--

In this issue, the editor will bring you about the difference and usage of LocalStorage and SessionStorage in vue. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

Earlier, I combed the verification mechanism in the background, mainly the use of Cookie, Session and Token, Django:Cookie setting and cross-domain problem handling, Cookie with Session, Django: Token-based verification. Of course, this does not mean that Token is optimal, or it needs to be selected according to project requirements, or it can be mixed and used.

What you need to do today is to store the Token sent from the backend to the client, where you can store Cookie, LocalStorage, SessionStorage and other places. Cookie has been introduced earlier and directly ignored here. Let's mainly talk about LocalStorage and SessionStorage.

What is LocalStorage?

LocalStorage, translated as "local memory", is a new storage object in HTML5, which is also used for local storage like Cookie, but solves the problem of insufficient storage space in Cookie (4k for each cookie), while localStorage browsers generally support 5m, usually storing strings in the form of key / value pairs.

What is SessionStorage?

SessionStorage, translated as "session storage", is also a new storage object added by HTML5, which is used to store data in the same window temporarily, which will be deleted after the window is closed. SessionStorage browsers generally support 5m, usually storing strings in the form of key / value pairs.

The difference between LocalStorage and SessionStorage

The LocalStorage lifecycle is permanent, and unless you actively clear the LocalStorage information, it will always be stored on the client. While the SessionStorage lifecycle is temporary and valid only in the current session window, closed pages or browser data will be automatically cleared.

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 strings in the form of key / value pairs, so you need to convert the data format when storing, 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 when extracting.

4.LocalStorage or SessionStorage is a new property of HTML5, so newer browsers are required to support it.

The usage of LocalStorage and SessionStorage

Because the application of LocalStorage is consistent with that of SessionStorage, there are no more explanations here. Take LocalStorage as an example.

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

The following is the specific usage and instructions, directly using localStorage. We can bring out the corresponding method, and we only need to understand its corresponding application properties to use it.

In this way, we can use localStorage.setItem ('key', 'value') to store the data sent from the server locally on the client side, and remember to convert the data before storing it.

Application examples of LocalStorage and SessionStorage

The following is my application in actual development. Earlier, I sent JSON data to the frontend through JsonResponse, including data (data requested by the user), token (token generated by the server) and code (status code for background processing). After receiving the data, the frontend processes the data to determine whether the code return is successful. If it is successful, we parse the data and store the data locally, otherwise the access fails.

Here I saved two pieces of data with localStorage and sessionStorage respectively. LocalStorage is customized and sessionStorage is obtained from the background. Open the browser developer tool. In Application, we can find the corresponding values we stored in localStorage and sessionStorage under Storage.

The above is the difference and usage of LocalStorage and SessionStorage in vue shared by the editor. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.