The difference between sessionstorage, localstorage and cookies

Use scenarios 1：
Same website , After successful login, a company will be saved id, Used to judge page style .

Put it in session There is a problem in the middle ： When login succeeds, copy the URL and open ,session disappear , Page style error .

programme ： Use localStorage Storage .

Use scenarios 2：

In a project , Yes 3 Website ,3 Login with different websites , But all interfaces need to be transmitted token, Common fields such as .

programme ： Use session Store their own information

The process ：

Try first localStorage Storage , Found two browser tabs , The result of saving is the same .

And then I tried session, The discovery is different , Each stores its own information , It's what I want .
principle ：

sessionStorage、localStorage and cookie The difference between
Common ground ： It's all saved on the browser side 、 And homologous
difference ：
1、cookie Data is always in the same source http Carry... In the request （ Even if you don't need ）, namely cookie Pass it back and forth between the browser and the server , and sessionStorage and localStorage It doesn't automatically send data to the server , Save locally only .cookie There are paths to data （path） The concept of , Can restrict cookie Only belong to a certain path
2、 Storage size limits are different ,cookie Data cannot exceed 4K, And because every time http Request will be carried cookie、 therefore cookie Only suitable for keeping small data , Such as session ID .sessionStorage and localStorage Although there are also storage size limitations , But more than cookie Much more , You can achieve 5M Or bigger
3、 Data validity is different ,sessionStorage： Valid only until the current browser window is closed ;localStorage： Always effective , Windows or browsers are closed and saved all the time , So as persistent data ;cookie： Only in settings cookie Valid before expiration time , Even if the window is closed or the browser is closed
4、 Different scopes ,sessionStorage Don't share in different browser windows , Even if it's the same page ;localstorage It's shared in all the same source windows ;cookie It is also shared in all homologous windows
5、web Storage Support event notification mechanism , You can send a data update notification to the listener
6、web Storage Of api The interface is more convenient to use

sessionStorage And page js The difference between data objects
The general js Object's lifetime is only valid for the current page , So in the case of reloading a page by refreshing the page or going to another page , The data doesn't exist
and sessionStorage As long as the same source is in the same window , Refresh the page or go to different pages of the same origin , Data always exists , That is to say, as long as the browser is not closed , The data still exists