How to use network storage to store the data of key-value pairs in HTML5

This article introduces the relevant knowledge of "how to use network storage to store data of key-value pairs in HTML5". Many people will encounter this dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Use local storage

We use the localStorage object to access the local storage, which returns the storage object, stores the data using the storage key-value pair, and has the following properties and methods:

Clear (): clear stored key-value pair data

GetItem (): get the value through the key

Key (): get the key value by index

Length: returns the number of key-value pairs

RemoveItem (): remove the specified data by key

SetItem (,): adds a key-value pair, and implements the update operation when the key-value pair of the specified key exists

[]: use the key to obtain the specified value by means of multiple subscripts.

The storage object allows us to store key-value pairs whose keys and values are strings, and the key is unique, which means that when we add a key-value pair using the setItem method, the update operation will be implemented if the key value already exists.

The copy code is as follows:

Example

Body > * {float:left;}

Table {border-colla ps e: close; margin-left:50px;}

, td {padding:4px;}

Th {text-align:right;}

Enter {border: fine solid black; padding:2px;}

Label {min-width:50px; display:inline-block; text-align:right;}

# countmsg,#buttons {margin-left:50px; margin-top:5px; margin-bottom:5px;}

Key:

Value:

Add

Clear

There is a project

Project count:

-

DisplayData ()

Var button = document.getElementsByTagName ('button')

For (var I = 0; I storageArea

Var tableElement = document.getElementById ('data')

_ window.onstorage = function (e) {

Var row =''

Line + =''+ e.key +''

Line + =''+ e.oleValue +''

Line + =''+ e.newValue +''

Line + =''+ e.url +''

Line + =''+ (e.storageArea = = localStorage) +'

TableElement [XSS _ clean] + = line

}

We add, delete, modify and modify the stored data in example 1, which will be displayed on the example 2 page. Example 2 works well in chrome browsers, firefox does not respond, and other browsers do not test.

Running result:

3. Use session storage

Session storage uses the same as local storage, except that its accessibility only goes to the internal page and disappears when the page is closed. We access it through sessionStorage.

The copy code is as follows:

Example

Body > * {float:left;}

Table {border-collapse: collapse; margin-left:50px;}

Th,td {padding:4px;}

Th {text-align:right;}

Enter {border: fine black; padding:2px;}

Label {min-width:50px; display:inline-block; text-align:right;}

# countmsg, # buttons {margin-left:50px; margin-top:5px; margin-bottom:5px;}

Key:

Value:

Add

Clear

Yes