溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
H5的web本地存儲怎么使用？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！
Web Storage是HTML5引入的一個非常重要的功能，可以在客戶端本地存儲數據，類似HTML4的cookie，但可實現功能要比cookie強大的多，cookie大小被限制在4KB，Web Storage官方建議為每個網站5MB。
Web Storage又分為兩種：
sessionStorage
localStorage
從字面意思就可以很清楚的看出來，sessionStorage將數據保存在session中，瀏覽器關閉也就沒了；而localStorage則一直將數據保存在客戶端本地；
不管是sessionStorage，還是localStorage，可使用的API都相同，常用的有如下幾個（以localStorage為例）：
保存數據：localStorage.setItem(key,value);讀取數據：localStorage.getItem(key);刪除單個數據：localStorage.removeItem(key);刪除所有數據：localStorage.clear();得到某個索引的key：localStorage.key(index);
如上，key和value都必須為字符串，換言之，web Storage的API只能操作字符串。
接下來，我們通過Web Storage開發一個簡單的通訊錄小程序，以演示相關API的使用方法；我們要實現如下功能：
錄入聯系人，聯系人有姓名、手機號碼2個字段，以手機號作為key存入localStorage；根據手機號碼，查找機主；列出當前已保存的所有聯系人信息；
首先先寫一個簡單的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>
要實現聯系人的保存，只需要簡單實現如下JS方法即可：
functionsave(){
varmobilephone=document.getElementById("mobilephone").value;
varuser_name=document.getElementById("user_name").value;
localStorage.setItem(mobilephone,user_name);
} //用于保存數據要實現查找機主，則實現如下JS方法：
//查找數據
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;
}感謝各位的閱讀！看完上述內容，你們對H5的web本地存儲怎么使用大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
