localStorage

What is localStorage

In HTML5, a new localStoragefeature has been added . This feature is mainly used as a local storage to solve the problem of insufficient cookie storage space (the storage space of each cookie in the cookie is 4k), and the general browser support in localStorage The size is 5M, this localStorage will be different in different browsers.

Features of localStorage

advantage：

localStorage expands the 4K limit of cookies;
localStorage can directly store the data requested for the first time locally. This is equivalent to a 5M database for front-end pages. Compared with cookies, it can save bandwidth, but this is only available in higher version browsers. Supported

Disadvantage：

The size of the browser is not uniform, and only IE versions above IE8 support the attribute localStorage;
At present, all browsers restrict the value type of localStorage to string type. This requires some conversion for our daily common JSON object type;
localStorage is not readable in the privacy mode of the browser;
LocalStorage is essentially a reading of strings . If the storage content is large, it will consume memory space and cause the page to become stuck;
localStorage cannot be crawled by crawlers.

sessionStorage

What is sessionStorage

sessionStorageIt is a new session storage object in HTML5, which is used to temporarily save the data of the same window (or tab), and the data will be deleted after the window or tab is closed. In the JavaScript language by window.sessionStorageor sessionStoragecall this object.

Features of sessionStorage

Same-origin policy restrictions. If you want to operate on the same sessionStorage between different pages, these pages must be under the same protocol, the same host name, and the same port. (IE 8 and 9 store data only based on the same host name, ignoring the requirements of the protocol (HTTP and HTTPS) and port number)
Single tab page restriction. The sessionStorage operation is limited to a single tab. Any access to the same-origin page in this tab can share sessionStorage data.
Store only locally. The data of seesionStorage will not be sent to the server along with the HTTP request, it will only take effect locally, and the data will be cleared after closing the tab. (If you use Chrome's restore tab function, seesionStorage data will also be restored).
Storage method. The storage method of seesionStorage adopts key and value methods. The value of value must be a string type (passing in a non-string will also be converted to a string when stored. A true value will be converted to "true").
Storage upper limit: different browsers have different storage upper limits, but most browsers limit the upper limit to 5MB or less.

cookie

What is a cookie

cookie, Sometimes also use its plural form of cookies. The type is "small text file", which is the data (usually encrypted) stored on the user's local terminal by some websites in order to identify the user's identity and perform Session tracking. The information is temporarily or permanently stored by the user's client computer. Cookies are data stored in the browser in the form of Key and Value.

Characteristics of cookies

Storage characteristics：

The storage size is limited and depends on the browser version
The number of storage items is limited, depending on the browser version
The character encoding is Unicode, and it does not support direct storage of Chinese
The storage content can be easily viewed, it is not recommended to store sensitive information
Poor reliability and may be deleted for various reasons at any time
In addition to Name, Value, and expiration time, the storage attributes also include Domian and Path. The current domain can operate the cookies of the current domain's subdomain and parent domain. The current Path can operate the current Path and the cookies under the current Path's child and parent Path.

Transmission characteristics：

Each time the Request client meets the domian and path requirements, the cookie will be transmitted to the server through the Request Headers
The size of the transmitted cookie will be limited by the browser and web server

Safety features：

The information in the cookie is easy to view, it is recommended to store it after encryption
Cookies can be easily exploited by XSS attacks. You can set HttpOnly=true to disallow client access (valid for 99.9% of browsers)

Features：

Session state management (such as user login status, shopping cart, game score and other information that needs to be recorded)
Personalized settings (such as user-defined settings, themes, etc.)
Browser behavior tracking (such as tracking and analyzing user behavior)

The difference between the three

Common point : They are all stored on the browser side and are of the same origin.
Differences:

The cookie data is always carried in the same-origin http request (even if it is not needed), that is, the cookie is passed back and forth between the browser and the server, while sessionStorage and localStorage will not automatically send the data to the server, but only save it locally. Cookie data also has the concept of path, which can restrict cookies to only belong to a certain path.
Storage size limits are different , cookie data cannot exceed 4K, and because each http request carries cookies, cookies are only suitable for storing very small data, such as session identifiers. Although sessionStorage and localStorage also have storage size limitations, they are much larger than cookies and can reach 5M or more
The data validity period is different , sessionStorage: only valid until the current browser window is closed; localStorage: always valid, the window or browser is closed and saved, so it is used as persistent data; cookie: only valid before the set cookie expiration time, even if the window Close or browser closed
The scope is different , sessionStorage is not shared in different browser windows, even the same page; localstorage is shared in all same-origin windows; cookie is also shared in all same-origin windows

The difference between localStorage, sessionStorage and cookie

Data storage mechanism