HTML5 How do I use Web Storage storage? 2 ways to store Web Storage (example)

Before HTML5, the storage of client data, sharing the burden of server storage is mainly using cookies. But cookies have many limitations, such as the number and length of cookies. Each domain can have a maximum of 20 cookies, each cookie cannot exceed 4KB in length, or it will be truncated; security issues. If a cookie is intercepted, the person can get all the session information. Even if encryption is not a problem, because the interceptor does not need to know the meaning of the cookie, he can simply forward the cookie as it is, and some states cannot be saved to the client. For example, to prevent a duplicate submission of a form, we need to save a counter on the server side. If we keep this counter on the client, it doesn't make any difference.

In order to crack down on a series of restrictions on cookies (mainly the size and number of cookies are limited, and every time you request a new page, the cookie will be sent in the past, thus virtually wasting bandwidth, in addition to the cookie needs to specify the scope, can not be called across domains), HTML5 through the new API JS can directly store a large number of data to the client browser, but also support the complex local database, so that JS more efficient. HTML5 supports two types of webstorage: Persistent local Storage (Localstorage), session-level local storage (sessionstorage). Let's look at the HTML5 how to use the Web Storage storage, introduction of the Web Storage storage 2 ways, we hope to help!

One: localstorage (persistent local storage)

stored locally, the data store is persistent, unless the user or program deletes it, and the data stored by the Localstorage object has no time limit. Data is still available after the second, second, or next year.

Characteristics:
① secure, permanent storage within the domain. That is, all pages from the same domain name in the client or browser can access the Localstorage data and the data is persisted in addition to deletion, but the data between the client or browser is independent of each other.
② data is not sent to the backend server with HTTP requests;
③ the size of the data storage opportunity is not considered, because the HTML5 standard requires the browser to support at least 4MB.

<! DOCTYPE html>
：


Localstorage provides four ways to assist us in the operation of local storage.
(1) SetItem (key,value): Add local storage data. Two parameters, very simple will not say.
(2) GetItem (key): Gets the corresponding value by key.
(3) RemoveItem (key): Delete local data via key.
(4) Clear (): Clears the data.

Two. Sessionstorage (session-level local storage)

Valid during the session, the data is automatically deleted after the browser is closed;

Features: Session control, short-term preservation. The session concept is similar to the server-side session concept, where short-term preservation refers to the automatic elimination of data after a window or browser or client shuts down.

<! DOCTYPE html>
：


The 
 Sessionstorage provides four ways to assist us in the operation of local storage. 
 (1) SetItem (key,value): Add local storage data. Two parameters, very simple will not say. 
 (2) GetItem (key): Gets the corresponding value by key. 
 (3) RemoveItem (key): Deletes local data via key. 
 (4) Clear (): Clears the data.