The differences and usage of cookies, localstorage and sessionstorage

cookie It is used to save the request information of the client browser request server page

HTML5 Of WebStorage Two types are available API：localStorage（ The local store ） and sessionStorage（ Session storage ）

WebStorage The aim is to overcome the problem of cookie Some of the restrictions , When data needs to be strictly controlled on the client side , No need to send data back to the server continuously

The common point of the three is to save in the browser , And homologous

Here are the differences between them

Life cycle

cookie： Can pass expires Set the expiration time , If you do not set the default to close the browser, it will be invalid

localStorage： Unless removed by hand , Otherwise permanent

sessionStorage： Effective only during the current session , Close the page and it will be invalid

Storage size

cookie:4KB about

localStorage、sessionStorage: It can be saved 5M Information about

HTTP request

cookie: Every time I carry it in http In the head , Overuse cookie Performance issues

localStorage、sessionStorage: Only on the client side （ Browser ） Kept in , Does not participate in communication with the server

Ease of use

cookie: It needs to be packaged by the programmer himself , Original Cookie The interface is not friendly

localStorage、sessionStorage： The source interface can accept , It can also be packaged again Object and Array There is better support

Application scenarios

cookie： Suitable for identifying user login

localStorage and sessionStorage The only difference is that it is permanently saved in the browser , One is to close the web page and clear the information

localStorage： It can be used to pass parameters across pages

sessionStorage： To save temporary data , Prevent users from losing parameters after refreshing the page