Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use web local storage". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to use web local storage.

Web storage means storing data on the user's computer, which relieves the pressure on the server and improves the experience.

1 characteristic

1. It is easy to set and read.

2. Large capacity, sessionStorage about 5m, localStorage about 20m.

3. Only strings can be stored, and the object JSON.stringify () can be encoded and stored.

2 window.sessionStorage

1. The life cycle is to close the current page window.

2. Data can not be shared under multiple windows (homologous strategy, Baidu's local Ali is not available to their families).

Add: you can jump.

Apply scenarios:

1. When the page is redirected, you can share the data through session.

2. In the application of some single page (spa), it is more useful to transmit values on the page.

3 window.localStorage

1. Permanently effective unless deleted manually or deleted by code.

2. Multiple windows can be shared (homologous policy).

Application scenario: some data that does not involve security (not too large) can be stored locally.

4 detailed explanation of the method

SetItem (key, value) sets the storage content

Window.localStorage/sessionStorage.setItem (key,value)

GetItem (key) reads storage content

Window.localStorage/sessionStorage.getItem (key,value)

RemoveItem (key) deletes the stored content whose key value is key

Window.localStorage/sessionStorage.removeItem (key,value)

Clear () clears all stored contents

Window.localStorage/sessionStorage.empty ()

Key (n) gets the key name with an index value

Window.localStorage/sessionStorage.key (n)

The number of data stored by length

Window.localStorage/sessionStorage.length

Difference:

Cookie data: always carried (even if not needed) in http requests of the same origin, that is, cookie is passed back and forth between the browser and the server. SessionStorage and localStorage do not automatically send the data to the server, but only save it locally. Cookie data also has the concept of path, which can restrict cookie to only belong to a certain path. The storage size limit is also different. Cookie data cannot exceed 4k, and because every http request carries cookie, cookie is only suitable for saving very small data, such as session identification. SessionStorage and localStorage also have storage size limits, but they are much larger than cookie, which can reach 5m or more. The validity period of the data is different.

SessionStorage: it is not possible to persist only until the current browser window is closed.

LocalStorage: always valid, window or browser closure is always saved, so it is used as persistent data; cookie is only valid until the set cookie expiration time, even if the window or browser is closed. With different scopes, sessionStorage cannot be shared in different browser windows, even the same page; localStorage is shared in all homologous windows; and cookie is shared in all homologous windows.

What they have in common: they are all stored data, stored on the web side, and are all of the same origin.

Differences:

(1) cookie is only 4K small and brings cookie to every request. It is a bad experience and a waste of bandwidth.

(2) session and local are directly stored locally, requests are not carried, and the capacity is much larger than cookie.

(3) session is a temporary session, which is cleared when the window is closed, while local is permanent and cookie has expiration time.

(4) both cookie and local can support multi-window sharing, while session does not support multi-window sharing but both support new windows with a link jump.

Thank you for your reading, the above is the content of "how to use web local storage". After the study of this article, I believe you have a deeper understanding of how to use web local storage, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.