Home > Article > Web Front-end > How to use H5 web local storage

How to use H5 web local storage

php中世界最好的语言Original: 2018-01-10 09:54:482415browse

This time I will show you how to use H5’s web local storage. How to use H5’s web local storage? What are the precautions when using H5's web local storage? The following is a practical case, let's take a look.

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 Storage official recommendation is 5MB per website.

Web Storage is divided into two types:

sessionStorage

localStorage

It can be seen clearly from the literal meaning Come out, sessionStorage saves the data in the session, and it disappears when the browser is closed; while localStorage always saves the data locally on the client;

Whether it is sessionStorage or localStorage, the available APIs are the same. Commonly used ones are as follows (take 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 string, In other words, web Storage's 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, and the contacts have names , mobile phone number 2 fields, use the mobile phone number as the key to store in localStorage; find the owner according to the mobile phone number; list all currently saved contact information;

First write a simple html code

<!DOCTYPEHTML>    
<html>    
<head>    
<metacharsetmetacharset="utf-8"/>    
<title>H5本地存储之WebStorage篇</title>    
</head>    
<body>  
<divstyledivstyle="border:2pxdashed#ccc;width:320px;text-align:center;">  
<labelforlabelfor="user_name">姓名：</label>  
<inputtypeinputtype="text"id="user_name"name="user_name"class="text"/>  
<br/>  
<labelforlabelfor="mobilephone">手机：</label>  
<inputtypeinputtype="text"id="mobilephone"name="mobilephone"/>  
<br/>  
<inputtypeinputtype="button"onclick="save()"value="新增记录"/>  
<hr/>  
<labelforlabelfor="search_phone">输入手机号：</label>  
<inputtypeinputtype="text"id="search_phone"name="search_phone"/>  
<inputtypeinputtype="button"onclick="find()"value="查找机主"/>  
<pidpid="find_result"><br/></p>  
</div>  
<br/>  
<dividdivid="list">  
</div>  
</body>  
</html>

To save contacts, you only need to simply implement the following JS method:

functionsave(){   
varmobilephone=document.getElementById("mobilephone").value;   
varuser_name=document.getElementById("user_name").value;   
localStorage.setItem(mobilephone,user_name);   
} //用于保存数据

To find the owner, implement the following JS method:

//查找数据   
functionfind(){   
varsearch_phone=document.getElementById("search_phone").value;   
varname=localStorage.getItem(search_phone);   
varfind_result=document.getElementById("find_result");   
find_result.innerHTML=search_phone+"的机主是："+name;   
}

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to use H5 web local storage

Related articles