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; }
相信看了这些案例你已经掌握了方法,更多精彩请关注其它相关文章!
相关阅读:
12个冷门的H5设计小技巧
H5中怎样使用postMessage实现两个网页间传递数据
H5怎样用绘制五角星
以上就是H5的web本地存储如何使用的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: H5的web本地存储如何使用
本文地址: https://pptw.com/jishu/583747.html