Cookie, LocalStorage, SessionStorage, and localstoragecookie

Cookie, LocalStorage, SessionStorage, and localstoragecookie

This article was originally published on my personal blog: chewing flavor

 

Recently I am looking for a summer internship. Baidu, Netease games, and Alibaba's interviews all asked some things about HTML5. Most of the questions start with this: "What HTML5 technology have you used ?" Then, what is the difference between Cookie and localStorage. This article aims to elaborate on this part in detail. For more information about the use of Web Storage APIs, see the MDN document.

 

Basic concepts Cookie

Cookies are cookies. As the name implies, cookie is indeed very small, and its size is limited to around 4 kb. It was invented by Lou Montulli, a former employee of Netscape in March 1993. It is mainly used to store login information. For example, you can see "Remember password" when logging on to a website market. This is usually achieved by storing a piece of data in the Cookie to identify the user.

LocalStorage

LocalStorage is a new technology added to the HTML5 standard. It is not an epoch new thing. As early as the Internet Explorer 6 era, something called userData was used for local storage. Considering browser compatibility, a more common solution was Flash. Nowadays, localStorage is supported by most browsers. If your website needs to support IE6 +, using userData as your polyfill solution is a good choice.

Features	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
LocalStorage	4	3.5	8	10.50	4
SessionStorage	5	2	8	10.50	4

SessionStorage

SessionStorage and localStorage interfaces are similar, but the life cycle of stored data is different from that of localStorage. Students who have worked on backend development should know the meaning of the word Session. The literal translation is "Session ". SessionStorage is a front-end concept. It only saves part of the data in the current session and refresh the page data. However, when the page is closed, the data in sessionStorage will be cleared.

 

Similarities and Differences

Features	Cookie	LocalStorage	SessionStorage
Data Lifecycle	You can set the expiration time. By default, it is disabled after the browser is closed.	Save permanently unless cleared	Valid only for the current session. The page or browser is cleared after it is closed.
Data storage size	About 4 K	Generally 5 MB	Generally 5 MB
Communicate with the server	Each time it is carried in the HTTP header, performance problems may occur if too much data is saved using cookies.	Valid only for the current session. The page or browser is cleared after it is closed.	Valid only for the current session. The page or browser is cleared after it is closed.
Ease of use	The Cookie interface generated by the source is unfriendly and needs to be encapsulated by the programmer.	The source interface is acceptable and can be encapsulated again to provide better support for objects and arrays.	The source interface is acceptable and can be encapsulated again to provide better support for objects and arrays.

Application scenarios

With an intuitive understanding of these differences, we can discuss the application scenarios of the three.

Because each HTTP request carries the Cookie information, the Cookie can be simplified and simplified. A common application scenario is to determine whether a user is logged on. For a user who has logged on, the server inserts a piece of encrypted Unique Identification Code for a single user into the Cookie upon login, the next time you read this value, you can determine whether the current user is logged on. Cookie is also used to save the user's shopping cart information on the e-commerce website. Now, with localStorage, it seems that you can also give a false Cookie ~

LocalStorage, on the other hand, takes over the Cookie-managed shopping cart and is also competent for other tasks. For example, HTML5 games usually generate some local data, and localStorage is also very suitable. If there are some forms with a lot of content, we may need to split the form page into multiple child pages to optimize the user experience, and then follow the steps to guide the user to fill in. At this time, sessionStorage is used.

Security considerations

Note that not all data is suitable for Cookie, localStorage, and sessionStorage. When using them, always pay attention to whether the Code has the risk of XSS injection. As long as you open the console, you can modify their values at will. That is to say, if your website has XSS risks, they will be able to attack your localStorage. So never use them to store sensitive data in your system.

References

• What is the difference between localStorage, sessionStorage, session and cookie?
• HTML5 localStorage security
• Wikipedia-Cookie
• Web Storage API
• Browser local data (sessionStorage, localStorage, cookie) and server data
• HTMl5 sessionStorage and localStorage
• HTML5 LocalStorage Local Storage