Detailed explanation of browser storage methods: the origin and difference of cookies, localstorage and sessionstorage

Detailed explanation of browser storage mode ：cookie、localstorage、sessionstorage The origin and difference of

As a developer , I don't know how the browser is stored , It's unqualified .

There are many ways to store , You can open the browser console to see Application Medium Storage What are the options .

Today is mainly about cookie、localstorage、sessionstorage The origin and difference of .

1、cookie The origin of

The browser function of getting up early is relatively simple , Pure is equivalent to a network resource viewer , Used to browse some documents , Check out some websites , It doesn't involve interaction . But with the development of the times , Interactive Web Gradually rising , Now cookie It was born . It is the special information sent by the server to the client , Each time the client wants to send a request to the server, it carries , It is mainly used to record the user information logged in before , Facilitate subsequent state management or behavior tracking .

2、localstorage and sessionstorage The origin of

cookie Of course, it has solved some problems , however cookie At that time, it was designed to store a small amount of data , So there's less to store , The second is every time cookie It should be sent to the server along with the request , This is a waste of Broadband . So behind html5 It's new localstorage and sessionstorage Two local storage methods .

The origin has been made clear , Next, let's list the differences between the three

difference	cookie	localStorage	sessionStroage
Storage location	Memory / Hard disk	Hard disk	Hard disk
Storage size	commonly 4k	5M Or more	5M Or more
Storage format	file	file	file
The period of validity	With background settings	permanent , Unless you delete	If the current page is closed, it will become invalid
Access method	Get all at once , Need secondary encapsulation	Have a ready-made get、set Method	Have a ready-made get、set Method
Scope	domain as well as domain All subdomains under	The same source can be shared in different windows	The same source cannot be shared under different windows
Send with request	yes , Send... Automatically	no	no
Application scenarios	Applied to state management 、 Behavior tracking	It is used for localized storage of slightly larger data or long-term storage of user information	It is applied to page Jump and parameter transfer, which is very convenient , Another is the one-time login of the account