Web Storage is a very important function introduced by HTML5. It can store data locally on the client side. It is similar to HTML4 cookies, but it can implement functions much more powerful than cookies. The size of the cookie is limited to 4KB. Web Storage official recommends 5MB per website.
Web Storage is divided into two types :sessionStorage
localStorage
It can be clearly seen from the literal meaning that sessionStorage saves data in session, and the browser is closed; localStorage keeps data locally on the client;
Whether it is sessionStorage or localStorage, the APIs that can be used are the same. The commonly used ones are as follows (taking 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 of a certain index: localStorage.key(index);
As mentioned above, both key and value must be strings. In other words, the web Storage API can only manipulate strings.
Next, we develop a simple address book applet through Web Storage to demonstrate how to use related APIs; we want to implement the following functions:
Enter the contact person. The contact person has two fields: name and mobile phone number, and 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 :<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>HTML5 local storage Web Storage article</title>
</head>
<body>
<div style="border: 2px dashed #ccc;width:320px;text-align:center;">
<label for="user_name">Name:</label>
<input type="text" id="user_name" name="user_name"/>
<br/>
<label for="mobilephone">Mobile phone:</label>
<input type="text" id="mobilephone" name="mobilephone"/>
<br/>
<input type="button" onclick="save()" value="Add record"/>
<hr/>
<label for="search_phone">Enter mobile phone number:</label>
<input type="text" id="search_phone" name="search_phone"/>
<input type="button" onclick="find()" value="Find the owner"/>
<p id="find_result"><br/></p>
</div>
<br/>
<div id="list">
</div>
</body>
</html>
The interface is displayed as follows :To save contacts, you only need to simply implement the following JS method:
//Save data
function save(){
var mobilephone = document.getElementById("mobilephone").value;
var user_name = document.getElementById("user_name").value;
localStorage.setItem(mobilephone,user_name);
}
To implement the search owner, the following JS method is implemented ://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.innerHTML = search_phone + "is: " + name;
}
To display all saved contact information, you need to use the localStorage.key(index) method, 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 = "<table border='1'>";
result += "<tr><td>Name</td><td>Mobile phone number</td></tr>";
for(var i=0;i<localStorage.length;i++){
var mobilephone = localStorage.key(i);
var name = localStorage.getItem(mobilephone);
result += "<tr><td>"+name+"</td><td>"+mobilephone+"</td></tr>";
}
result += "</table>";
list.innerHTML = result;
}else{
list.innerHTML = "The data is currently empty, hurry up and start adding contacts";
}
}
The effects are as follows:
Question: As mentioned above, there are only 2 fields, name and mobile phone number. If you want to deposit richer contact information, such as company name, home address, etc., how to achieve it? Isn't Web Storage only able to process strings? At this time, you can use the stringify() method of JSON to convert complex objects into strings and store them in Web Storage; when read from Web Storage, you can convert them into JSON objects through JSON's parse() method;
The following brief demonstration adds company attributes to save JS code ://Save data
function save(){
var contact = new Object;
contact.user_name = document.getElementById("user_name").value;
contact.mobilephone = document.getElementById("mobilephone").value;
contact.company = document.getElementById("company").value;
var str = JSON.stringify(contact);
localStorage.setItem(contact.mobilephone,str);
loadAll();
}
// 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 = "<table border='1'>";
result += "<tr><td>Name</td><td>Mobile</td><td>Company</td></tr>";
for(var i=0;i<localStorage.length;i++){
var mobilephone = localStorage.key(i);
var str = localStorage.getItem(mobilephone);
var contact = JSON.parse(str);
result += "<tr><td>"+contact.user_name+"</td><td>"+contact.mobilephone+"</td><td>"+contact.company+"</td></tr>";
}
result += "</table>";
list.innerHTML = result;
}else{
list.innerHTML = "The data is currently empty, hurry up and start adding contacts";
}
}
The effects are as follows: