HTML5 Advanced -13 Web Storage API (two storage systems, Sessionstorage, Localstorage)

One, two storage systems

Two storage systems

-The World Wide Web was originally conceived as a way of presenting information. Information processing occurs only later, but the nature of the web does not change---information is processed on the server and then displayed to the user. Because the system does not utilize computer resources, complex operations are done on the server

-For any program, being able to implement data storage is one of the essential features and can provide data when needed. But in the past Web client, there is no effective mechanism to support data storage

-Cookies have been used to store small amounts of information on the client, but are limited by their nature, and cookies can store only a few short strings

-The Web storage API is provided in HTML5, which is an enhancement on top of the cookie. This API allows us to store on the user's hard drive. and use the data later.

-This API can be divided into two parts:

-The information must and only---sessionstorage during the session

-The information must be stored for a long time and determined by the user---localstorage

Second, Sessionstorage

Sessionstorage Overview

-Sessionstorage This part of the API is like a substitute for session cookies. Cookies and sessionstorage are used to keep data available for a specific period of time. But a cookie uses a browser as a reference, and Sessionstorage uses a single window as a reference, which means that the sessionstorage is no longer available after the window is closed.

Create data

-both Sessionstorage and Localstorage store data as items. The combination format of key/value pairs

Syntax

-SetItem (Key,value): Creates an item with keys and values. If the key already exists, the value is updated, so you can also update the value with this method

-GetItem (Key): Specifies the key of the item to get, and the corresponding value according to the key

Setting up data

Sessionstorage.setitem (' Uanme ', ' Naruto ');

Reading data

var name = Sessionstorage.getitem (' uname ');

Reading data

-The API provides more methods and properties to manipulate items, making the code more useful

-Properties

-Length: Returns the number of items that the application accumulates in the storage space

-Method

-Key (Index): Gets the key of the item corresponding to the specified index

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/7E/4E/wKiom1b7yaLBo9j8AABR-fmuIq4306.png "title=" Web.png "alt=" Wkiom1b7yalbo9j8aabr-fmuiq4306.png "/>

Delete data

-Two methods are available in the API to delete items

-RemoveItem (Key): Deletes the specified item based on the key of the key

-Clear (): empties the entire storage space. Each item is deleted

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/7E/4E/wKiom1b7yjmAFOzYAAA34VqFabM549.png "title=" Web.png "alt=" Wkiom1b7yjmafozyaaa34vqfabm549.png "/>

Third, Localstorage

Localstorage Overview

-there is a reliable system to store during a window session and may be useful in some cases. However, to emulate a powerful desktop application on the Web, a temporary data storage system is not enough

-To solve this problem, the API provides another system that retains one storage system for each source and keeps the information persistent---localstorage

-With Localstorage, you can save a large amount of data, and the user decides whether the information is available and whether it is retained

-Localstorage and Sessionstorage have the same interface, so sessionstorage methods and properties are valid for Localstorage

Storage Events

-Because Localstorage provides information to every window that is opened to load the same program, it produces at least two questions:

-How to communicate between each window

-How to update window information that is not currently active or has no focus

-to address the above two issues, the API provides the storage event

-Storage Event: This event is triggered every time the storage space changes. So you can notify each window of the same program through this event

Syntax

-Window.addeventlistener (' storage ', updatenum,false);

Summary: This chapter mainly introduces the following HTML5 Web Storage API (two storage systems, Sessionstorage, Localstorage)

This article from the "Technical Exchange" blog, declined reprint!

HTML5 Advanced -13 Web Storage API (two storage systems, Sessionstorage, Localstorage)