Local web storage and web Storage

Local web storage and web Storage

With the rapid development of the Internet, web-based applications become more and more common and more complex. To meet various needs, a large amount of data is frequently stored locally, traditionally, we use document. cookie is used for storage. However, because the storage size is only about 4 K, and the resolution is quite complex, each request is sent with a cookie, which may result in a waste of bandwidth, it brings a lot of inconvenience to development, and provides solutions for HTML5 specifications.

Web storage stores data on users' computers, which can relieve server pressure and improve user experience. 1. Feature 1: easy to set and read. 2. Large Capacity. sessionStorage is about 5 M and localStorage is about 20 M. 3. Only strings can be stored. The object JSON. stringify () can be encoded and stored. 2 window. sessionStorage1. The lifecycle is to close the current page window. 2. data can not be shared in multiple windows (same-source policy, Baidu's local Alibaba's home cannot be obtained ). Supplement: You can use the redirection function. Use Cases: 1. Data can be shared through sessions during page Jump. 2. In some spa applications, it is useful to pass page values. 3 window. localStorage1, permanently effective, unless manually deleted or deleted with code. 2. Multiple windows can be shared (same-origin policy ). Application Scenario: some data that does not involve Security (not too large) can be stored locally. 4. Method Description: setItem (key, value) is used to set the storage content window. localStorage/sessionStorage. setItem (key, value); getItem (key) reads the stored content window. localStorage/sessionStorage. getItem (key, value); removeItem (key) deletes the stored content window whose key value is key. localStorage/sessionStorage. removeItem (key, value); clear () clears all stored content windows. localStorage/sessionStorage. empty (); key (n) obtains the key name window Based on the index value. localStorage/sessionStorage. key (n); the number of data stored in length window. localStorage/sess IonStorage. length; Difference: cookie data: always carried in the same source http Request (even if not required), that is, the cookie is transmitted back and forth between the browser and the server. SessionStorage and localStorage do not automatically send data to the server and only save the data locally. Cookie data also has the concept of path, which can restrict the cookie to only belong to a specific path. The storage size limit is also different. The cookie data cannot exceed 4 kb. Because each http request carries a cookie, the cookie is only suitable for storing small data, such as session IDs. Although sessionStorage and localStorage have limits on the storage size, they are much larger than cookies and can reach 5 MB or larger. The Data Validity period is different. SessionStorage: it is valid only before the current browser window is closed. Naturally, it cannot be permanently maintained. LocalStorage: always valid, and the window or browser is closed, so it is used as persistent data. The cookie is only valid until the set cookie expires, even if the window or browser is closed. With different scopes, sessionStorage cannot be shared in different browser windows, even on the same page. localStorage is shared in all same-source windows, and cookies are shared in all same-source windows. Similarities: all data is stored on the web end and are same-source. Differences: (1) the cookie is only 4 K small, and each request carries a cookie with poor experience, wasting bandwidth. (2) sessions and local files are directly stored locally, and requests are not carried, and the capacity is much larger than that of cookies. (3) A session is a temporary session. When the window is closed, the session is cleared. The local session permanently exists and the cookie has an expiration time. (4) both cookie and local support multi-window sharing, while session does not support multi-window sharing but both support a-link jump to a new window.