H5的web本地存儲怎么使用

發(fā)布時間：2020-09-28 15:27:10 來源：億速云閱讀：109 作者：小新欄目：web開發(fā)

H5的web本地存儲怎么使用？這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

Web Storage是HTML5引入的一個非常重要的功能，可以在客戶端本地存儲數(shù)據(jù)，類似HTML4的cookie，但可實現(xiàn)功能要比cookie強大的多，cookie大小被限制在4KB，Web Storage官方建議為每個網(wǎng)站5MB。

Web Storage又分為兩種：

sessionStorage

localStorage

從字面意思就可以很清楚的看出來，sessionStorage將數(shù)據(jù)保存在session中，瀏覽器關(guān)閉也就沒了；而localStorage則一直將數(shù)據(jù)保存在客戶端本地；

不管是sessionStorage，還是localStorage，可使用的API都相同，常用的有如下幾個（以localStorage為例）：

保存數(shù)據(jù)：localStorage.setItem(key,value);讀取數(shù)據(jù)：localStorage.getItem(key);刪除單個數(shù)據(jù)：localStorage.removeItem(key);刪除所有數(shù)據(jù)：localStorage.clear();得到某個索引的key：localStorage.key(index);

如上，key和value都必須為字符串，換言之，web Storage的API只能操作字符串。

接下來，我們通過Web Storage開發(fā)一個簡單的通訊錄小程序，以演示相關(guān)API的使用方法；我們要實現(xiàn)如下功能：

錄入聯(lián)系人，聯(lián)系人有姓名、手機號碼2個字段，以手機號作為key存入localStorage；根據(jù)手機號碼，查找機主；列出當前已保存的所有聯(lián)系人信息；

首先先寫一個簡單的html代碼

<!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>

要實現(xiàn)聯(lián)系人的保存，只需要簡單實現(xiàn)如下JS方法即可：

functionsave(){   
varmobilephone=document.getElementById("mobilephone").value;   
varuser_name=document.getElementById("user_name").value;   
localStorage.setItem(mobilephone,user_name);   
} //用于保存數(shù)據(jù)

要實現(xiàn)查找機主，則實現(xiàn)如下JS方法：

//查找數(shù)據(jù)   
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;   
}

感謝各位的閱讀！看完上述內(nèi)容，你們對H5的web本地存儲怎么使用大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

H5的web本地存儲怎么使用

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽