This is the 8th day of my participation in Gwen Challenge
emmm… Not the cookie above, of course
The client can interact with the server through cookies. WebStorage can overcome some limitations brought by cookies. When data needs to be strictly controlled on the client, it does not need to continuously send data back to the server, and provides a way to store a large amount of data that can exist across sessions.
Cookie
Cookie data is always carried in same-origin HTTP requests, that is, cookies are passed back and forth between the browser and the server. Cookie data also has the concept of path, which can limit cookies to belong to a certain path and store them in a small size of 4K or so. (Key: can be passed back and forth between the browser and the server, small storage capacity, only about 4 KB).
localStorage
LocalStorage is a new technology added to the HTML5 standard. LocalStorage does not automatically send data to the server, but only saves it locally. Data is always alive and is always saved when a window or browser is closed and therefore used as persistent data.
sessionStorage
The sessionStorage interface is similar to that of localStorage, but the life cycle of storing data is different from that of localStorage. Valid only until the current browser window is closed, which is unlikely to last forever.
Above contrast
scenario
Given that every HTTP request carries information about cookies, cookies are, of course, as thin as they can be
A common application scenario is to judge user login status. For example, the user ID is stored in a cookie, and the server will insert an encrypted unique identification code to the cookie when he logs in, so that the user can judge whether the current user is logged in as long as the user reads this value next time. Many forums and communities now offer this functionality. Cookies can also set the expiration time, when the time limit is exceeded, the cookie will automatically disappear. As a result, the system can often prompt users for how long they want to stay logged in: common options are one month, three months, a year, and so on.
It can also be used to track user behavior, such as a weather-forecasting site that displays local weather conditions based on the region a user chooses. If it is cumbersome to choose the location every time, it will appear very humanized after using cookies. The system can remember the area visited last time, and when opening the page next time, it will automatically display the weather situation in the area where the user was last time. Because everything is done in the background, it is very easy to customize the page as if it were customized for a particular user. If the site provides the ability to change the skin or layout, you can use cookies to record the user’s options, such as background color, resolution, etc. When the user visits the interface next time, the interface style of the last visit can still be saved.
Cookies used to save the user’s shopping cart information in the e-commerce site, now with localStorage to take over the job of Cookie management shopping cart, but also competent for some other work. For example, HTML5 games usually generate some local data, and localStorage is also very suitable. If you come across a form with a lot of content, to optimize the user experience, you might want to split the form page into several sub-pages and guide the user through the steps. This is where sessionStorage comes into play.
security
It is important to note that not all data is suitable for Cookie, localStorage, and sessionStorage. When using them, you need to be aware of any code that is at risk of XSS injection. As soon as you open the console, you can change their values at will, which means they can do whatever they want with your localStorage if your site has XSS at risk. So never use them to store sensitive data on your system.
In common
Cookies, localStorage, and sessionStorage are all stored on the browser side and are homologous.