Web Storage API, please refer to the MDN document
1. Basic Concepts
Cookie
Cookie is the meaning of cookies. As the name suggests, cookies are indeed very small, with a size limit of around 4KB, and were invented in March 1993 by Lou Montulli, a former employee of Netscape. Its main purpose is to save login information. For example, when you log in to a certain website market, you can see "remember password", which is usually achieved by storing a piece of data to identify the user's identity in a cookie.
localStorage
localStorage is a new technology added to the HTML5 standard, it is not something new. Back in the IE 6 era, there was a thing called userData for local storage, and at that time, considering browser compatibility, the more general solution was to use Flash. Today, localStorage is supported by most browsers. If your website needs to support IE6+, then using userData as your polyfill is a good choice.
| characteristic | 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 has a similar interface to localStorage, but saves data with a different life cycle than localStorage. Students who have done back-end development should know the meaning of the word Session, which is literally translated as "session". The sessionStorage is a front-end concept, it can only save a part of the data in the current session, and the refresh page data still exists. But when the page is closed, the data in sessionStorage will be emptied.
2. Comparison of similarities and differences
| characteristic | Cookie | localStorage | sessionStorage |
| data lifetime | Generally generated by the server, the expiration time can be set. If a cookie is generated on the browser side, the default is to expire after closing the browser | Persistent unless cleared | Valid only for the current session, cleared after closing the page or browser |
| storage data size | Around 4K | Usually 5MB | Same as on the left |
| Communicate with the server side | It will be carried in the HTTP header every time. If you use cookies to save too much data, it will cause performance problems. | It is only saved in the client (ie browser) and does not participate in the communication with the server | Same as on the left |
| Ease of use | The programmer needs to encapsulate it by himself, and the original Cookie interface is not friendly | The source interface can be accepted, and can be repackaged to have better support for Object and Array | Same as on the left |
Application Scenarios
With an intuitive understanding of the above differences, we can discuss the application scenarios of the three.
Considering that each HTTP request will carry cookie information, of course, cookies can be simplified if they can be simplified. A common application scenario is to determine whether the user is logged in. For a logged-in user, the server will insert an encrypted identification code that uniquely identifies a single user into the cookie when he logs in. Next time, just read this value to determine whether the current user is logged in. In the past, cookies were used to save the shopping cart information of users on e-commerce websites. Now, with localStorage, it seems that cookies can be given a vacation in this regard
. Can do some other jobs. For example, HTML5 games usually generate some local data, and localStorage is also very suitable. If we encounter some forms with a lot of content, in order to optimize the user experience, we may split the form page into multiple sub-pages, and then guide the user to fill in the steps. At this time, the role of sessionStorage comes into play.
3. Security considerations It
should be noted that not all data is suitable for Cookie, localStorage and sessionStorage. When using them, you need to always be aware of any code that is at risk of XSS injection. Because as long as you open the console, you can modify their values at will, which means that if your website is at risk of XSS, they can do whatever they want with your localStorage. So never use them to store sensitive data on your system.
-
Reprinted from:
http://jerryzou.com/posts/cookie-and-web-storage/
-