探索HTML5本地存储功能运用技巧

时间:2021-05-08

我们来实现一个简单应用,该应用中用户输入用户名和手机号,相关因袭可以保存到保存到本地,并可以进行查找、展示等基本操作。
以下只给我出关键代码,项目结构和基本代码以及CSS样式大家可以自己添加。
我们按照功能进行分布完成。

1、存储功能

这里我们要完成,当用户输入姓名和手机号时,自己的信息存储到Web Storage中,html中代码如下:

XML/HTML Code复制内容到剪贴板
  • <form>
  • <labelforlabelforlabelforlabelfor=”username”>姓名:</label>
  • <inputtypeinputtypeinputtypeinputtype=”text”id=”username”name=”username”/>
  • <labelforlabelforlabelforlabelfor=”mobilephone”>手机号:</label>
  • <inputtype=”text”id=”mobilephone”name=”mobilephone”/>
  • </form>
  • <inputtype=”button”onclick=”save()”vale=”新增记录”/>
  • </form>
  • 以上代码是一个表单,用户输入姓名和手机号后,点击新增记录,即可在本地中保存姓名-手机号键值对。具体的js中save函数代码如下:

    JavaScript Code复制内容到剪贴板
  • functionsave(){
  • varmobilePhone=document.getElementById(“mobilephone”).value;
  • varuserName=dpcument.getElementById(“username”).value;
  • localStorage.setItem(mobilePhone,userName);
  • }
  • Save函数的逻辑很简单,就是取出用户输入的值,然后利用localStorage的setItem功能以键值对的形式将信息存储到Web Storage中。

    2、查找功能

    查找功能需要实现,当用户输入某个电话号码时,显示数据库中对应查找信息。HTML代码如下:

    XML/HTML Code复制内容到剪贴板
  • <labelfor=”search”>请输入手机号:</label>
  • <inputtype=”text"id=”search”name=”search”/>
  • <inputtype=”button”onclick=”find()”value=”查找”>
  • <pid=”result”><p>
  • 其中result区域用来放置查询的结果。下面给出js中find函数的相关代码:

    JavaScript Code复制内容到剪贴板
  • functionfind(){
  • varsearch=document.getElementById(“search”).value;
  • varname=localStorge.gteItem(search);
  • varresult=document.getElementById(“result”);
  • result.innerHTML=search+“:”+name;
  • }
  • 先获取用户输入的手机号,然后利用getItem放大从数据库中获取手机号为这个的用户名,最后一同显示在result区域中。

    以上两个是最基本的功能,我们将会继续探索本地存储的高级用法,以及如何在移动应用中自如的运用本地存储功能。

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章