How to use Web Storage in HTML5 local storage

This article is about how to use Web Storage in HTML5 local storage. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Web Storage is a very important function introduced by HTML5, which can store data locally on the client side, similar to HTML4's cookie, but can be implemented much more powerful than cookie. The size of cookie is limited to 4KB Magi Web Storage official recommendation for each website 5MB.

There are two types of Web Storage:

SessionStorage

LocalStorage

It is clear from the literal meaning that sessionStorage saves the data in session and the browser is closed, while localStorage keeps the data locally on the client side.

The same API can be used for both sessionStorage and localStorage. The following are commonly used (take localStorage as an example):

Save data: localStorage.setItem (key,value)

Read data: localStorage.getItem (key)

Delete individual data: localStorage.removeItem (key)

Delete all data: localStorage.clear ()

Get the key:localStorage.key (index) of an index

As mentioned above, both key and value must be strings, in other words, the API of web Storage can only manipulate strings.

Next, we develop a simple address book Mini Program through Web Storage to demonstrate the use of related API; we want to implement the following functions:

Enter the contact. The contact has two fields: name and mobile phone number, and the mobile phone number is stored in localStorage as key.

Find the owner according to the mobile phone number.

List all currently saved contact information

First, prepare a simple HTML page, as follows:

The code is as follows:

Web Storage articles for HTML5 local storage

Name:

Mobile phone:

The interface is shown as follows:

To save contacts, simply implement the following JS method:

The code is as follows:

/ / Save data

Function save () {

Var mobilephone = document.getElementById ("mobilephone") .value

Var user_name = document.getElementById ("user_name") .value

LocalStorage.setItem (mobilephone,user_name)

}

To find the host, implement the following JS method:

The code is as follows:

/ / find data

Function find () {

Var search_phone = document.getElementById ("search_phone") .value

Var name = localStorage.getItem (search_phone)

Var find_result = document.getElementById ("find_result")

The owner of find_ result [XSS _ clean] = search_phone + "is:" + name

}

To display all saved contact information, you need to use the localStorage.key (index) method, as follows:

The code is as follows:

/ / extract all objects stored in localStorage and display them on the interface

Function loadAll () {

Var list = document.getElementById ("list")

If (localStorage.length > 0) {

Var result = ""

Result + = "name, mobile phone number"

For (var ionome0nteri0) {

Var result = ""

Result + = "name mobile phone company"

For (var iTuno Bandi)