August 19 = 436-440

16.1 web Storage

In the traditional HTML era, the main function of a browser is to display HTML pages. Even if JavaScript scripts are added, the browser still serves to dynamically modify HTML pages. Therefore

The browser is just a "interface rendering job ".

If developers need to store a small amount of data on the client, they can only use cookies in the early stage, but there are three shortcomings in cookies:

The cookie size is limited to 4 kb.

Cookies are contained in each HTTP request and sent to the server. This will inevitably lead to repeated data sending.

Cookies are not encrypted during network transmission (unless SSL is used for the entire application), so there may be some security risks.

The emergence of HTML5 has changed this situation, and HTML5 has added the Web storage function. Web storage allows applications to save program data on the client when the client is running,

In this way, the browser becomes a real "program running environment" instead of simply "interface rendering tool ".

 

16.1.1 storage Interface

Web storage can be divided into the following two types:

Session storage: Session-based Web storage. The data retention period of session storage is the same as that of the user session. When the user session ends,

The data stored by session storage is lost.

Local Storage: Web storage stored on the user's disk. Data stored through local storage has a long life cycle, unless the user or program explicitly displays the data,

Otherwise, the data will always exist.

The window object provides the sessionstorage and localstorage attributes, which represent session storage and local storage respectively. Session Storage

And local storage are both instances of the storage interface, so their functions are almost the same as those of users, but they only have different life cycles for storing data.

The W3C organization defines interfaces for storage as follows:

Interface Storage

{

Readonly attribute unsigned long length;

Domstring? Key (unsigned long index );

Getter domstring getitem (domstring key );

Setter createor void setitem (domstring key, domstring value );

Deleter void removeitem (domstring key );

Void clear ();

}

From the interface definition above, we can see that storage provides the following attributes and methods.

Length: the number of key-value pairs saved in the storage.

Key (INDEX): This method returns the index key in storage.

Getitem (key): This method returns the value corresponding to the specified key in storage.

Set (key, value): This method is used to store the specified key-value pair to storage.

Removeitem (key): This method is used to delete the key-value pair corresponding to the specified key from the storage.

Clear (): This method is used to delete all key-value pairs in the storage.

 

16.1.2 use storage to store and read data

Code example:

// Script code

VaR savestorage = function (ID)

{

// If the check box is selected, use local storage to save data

// Otherwise, use session storage to save data

VaR checked = Document. getelementbyid ("local"). checked;

VaR storage = checked? Localstorage: sessionstorage;

VaR target = Document. getelementbyid (ID );

Storage. setitem ("message", target. value );

}

VaR loadstorage = function (ID)

{

// If the check box is selected, use local storage to save data

// Otherwise, use session storage to save data

VaR checked = Document. getelementbyid ("local"). checked;

VaR storage = checked? Localstorage: sessionstorage;

VaR target = Document. getelementbyid (ID );

// Read data

Target. innerhtml = storage. getitem ("message ");

}

// Html code

<Input type = "text" id = "input"/>

Save with local storage: <input type = "checkbox" id = "local"/>

<Div id = "show"> </div>

<Input type = "button" value = "save data" onclick = "savestorage ('input');"/>

<Input type = "button" value = "read data" onclick = "loadstorage ('show');"/>