HTML5 local storage Web Storage application introduction_html5 tutorial skills

Web Storage is a very important feature introduced by HTML5. It can store data locally on the client, similar to HTML4 cookies, but its functions are much more powerful than cookies. The cookie size is limited to 4KB. Web Storage officially recommends that each Website 5MB.
Web Storage is divided into two types :
sessionStorage
localStorage
It can be clearly seen from the literal meaning that sessionStorage saves the data in the session and the browser is closed. That’s gone; localStorage always saves data locally on the client;
Whether it is sessionStorage or localStorage, the APIs that can be used are the same, and the commonly used ones are as follows (taking localStorage as an example):
Save data: localStorage.setItem(key,value);
Read data: localStorage.getItem(key);
Delete single data: localStorage.removeItem(key);
Delete all data: localStorage.clear ();
Get the key of an index: localStorage.key(index);
As above, both key and value must be strings. In other words, the web Storage API can only operate on strings.
Next, we develop a simple address book applet through Web Storage to demonstrate the use of relevant APIs; we want to implement the following functions:
Enter contacts. Contacts have two fields: name and mobile phone number. , use the mobile phone number as the key to store it in localStorage;
Find the owner according to the mobile phone number;
List all currently saved contact information;
First, prepare a simple HTML page, As follows :

Copy code

The code is as follows: