HTML5 Offline Storage WebStorage

HTML5 the main use of cookies before introducing WebStorage.

The webstorage of HTML5 is divided into two kinds: localstorage and sessionstorage, the difference between them is mainly different in the life cycle.

1, Localstorage

Localstorage is used for persistent local storage, where the data is stored on the client's browser, and is never expired unless the data is actively deleted. Localstorage is stored in a way that is stored in a key-value pair, only as a string. Stored content can have pictures, JSON, styles, scripts, and so on as long as it can be serialized as a string.

Localstorage API Basic Use Method:

• Use Localstorage.setitem (Key,value) to set the data as follows:

for(var i=0; i<10; i++){ localStorage.setItem(i,i); } 

• Use Localstorage.getitem (key) to get the data, use localstorage.valueof () to get all the data, as follows:

  for(var i=0; i<10; i++){ localStorage.getItem(i); }

• Use Localstorage.removeitem (key) to delete the data as follows:

for(var i=0; i<5; i++){ localStorage.removeItem(i); }

• Use Localstorage.clear () to clear all the data and use Localstorage.length to get the number of locally stored data

• Use Localstorage.key (n) to get the key value of the nth data.

2, Sessionstorage

Sessionstorage is used to store data locally in a session that is only accessible to pages in the same session and that the session ends, such as when the window is closed, and the data is destroyed. It is a session-level store.

The use of sessionstorage is similar to that used by the Localstorage method.

3. The difference between webstorage and cookies

• The cookie data is always carried in the same-Origin HTTP request, and the cookie is passed back and forth between the browser and the server, while Localstorage and sessionstorage do not automatically transmit the data to the server side and are stored locally only.

• The storage size limit is different, the cookie storage data size requirement cannot exceed 4k, each time the HTTP request carries the cookie, therefore the saved data needs to be relatively small. Sessionstorage and Localstorage store data size limits larger than cookies, can reach 5m or larger, and different browser settings may be different.

• The data life cycle is different. The life cycle of a cookie is generally valid until the expiration time of its setting. Sessionstorage is only valid until the window is closed, localstorage lasts until it is manually deleted.

• Scopes are different, sessionstorage are not shared in different browsers, even if the same page is not supported. Localstorage are shared across all homologous windows, and similarly, cookies can be shared across all homologous windows.

• The data of a cookie also has the concept of a path, which can be restricted by setting a cookie to only one path.

• The Web Storage supports event notification mechanisms that can send notifications of data updates to listeners.

4. Benefits of using WebStorage

• Reduce network traffic: Use WebStorage to save data locally, without the need to send cookies every time a cookie is sent, reducing unnecessary data requests and reducing the data being passed back and forth on the browser and server side.

• Fast display of data: Getting data from the local is more efficient than getting data from the server over the network, so the page is displayed faster.

• Temporary storage: Most of the time the data needs to be used only when the user browses a set of pages, and the data can be discarded when the window is closed, which is very convenient to use sessionstorage.

• Does not affect the website performance: Because the Web Storag only function in the client browser, does not occupy the bandwidth, does not want the website performance, therefore may the size big, the security low data stores in the Web Storage, the GA high website performance.

5, offline cache (application cache)

HTML5 introduces an application cache that caches the Web, uses it without network conditions, and creates an app cache by creating a cache manifest file.

HTML5 Offline Storage WebStorage