with the rapid development of the Internet, Web-based applications are increasingly common, but also become more and more complex, in order to meet a variety of needs, will often store a large number of local data, Traditional way we use Document.cookie to store, but because its storage size is only about 4k, and the resolution is quite complex, every time the request will carry a cookie, will cause the waste of bandwidth, to the development of a lot of inconvenience, HTML5 specifications proposed solutions.
Web Storage means storing data on a user's computer, which can relieve the pressure on the server and improve the experience.
1 Features
1, easy to set up and read.
2, large capacity, sessionstorage about 5M, localstorage about 20M.
3. Only the string can be stored, and the object Json.stringify () is encoded and stored.
2 Window.sessionstorage
1, the life cycle is closed the current page window.
2, not more than the window can be shared data (homologous strategy, Baidu home of the local Ali their home is not to get).
add: by jumping yes.
Application Scenarios:
1, the page jump can be achieved through the session data sharing.
2, in some single page (SPA) in the use of the page to pass the value of the time is more useful.
3 Window.localstorage
1, permanent effect, unless manually deleted or deleted by code.
2, can be multi-window sharing (same-origin policy).
Application Scenario: Some data that is not related to security (not too large) can be stored locally.
4 Detailed methods
SetItem (key, value) to set the storage content
Window.localstorage/sessionstorage.setitem (key,value);
GetItem (key) Read storage content
Window.localstorage/sessionstorage.getitem (key,value);
RemoveItem (key) Delete stored content with key value
Window.localstorage/sessionstorage.removeitem (key,value);
Clear () empties all stored content
window.localstorage/sessionstorage.empty ();
Key (n) takes the index value to get the key name
Window.localstorage/sessionstorage.key (n);
number of data stored in length
window.localstorage/sessionstorage.length;
difference:
cookie data: Always carried in the same-Origin HTTP request (even if not required), that is, the cookie is passed back and forth between the browser and the server. Sessionstorage and Localstorage do not automatically send data to the server and are saved locally only. The cookie data also has the concept of path, which limits the cookie to only one path. The storage size limit is also different, the cookie data cannot exceed 4k, and because each HTTP request carries a cookie, the cookie is only suitable for storing very small data, such as a session ID. Sessionstorage and Localstorage have a storage size limit, but are much larger than cookies and can reach 5M or larger. Data is valid for different periods.
sessionstorage: is only valid until the current browser window is closed, and it is naturally impossible to persist.
Localstorage: Always valid, window or browser Close is also saved, so it is used as persistent data, and cookies are only valid until the cookie expiration time is set, even if the window or browser is closed. Scopes are different, sessionstorage cannot be shared in different browser windows, even on the same page, Localstorage is shared across all homologous windows, and cookies are shared across all homologous windows.
The same point: Store data, store it on the web side, and are all of the same origin.
different points:
(1) cookies are only 4 K small and each request will bring a cookie experience is not good, wasting bandwidth.
(2) The session and local are stored directly locally, the request will not be carried, and the capacity is much larger than the cookie.
(3) session is a temporary conversation, when the window is closed when it is cleared, and the local permanent existence, the cookie has an expiration time.
(4) Cookies and local can support multi-window sharing, but the session does not support multi-window sharing but supports a new window for link jump.
want to learn the front-end development of students, you can add group: 434623999 Study Oh!
Web Local Storage
