时间:2021-05-08
我们来实现一个简单应用,该应用中用户输入用户名和手机号,相关因袭可以保存到保存到本地,并可以进行查找、展示等基本操作。
以下只给我出关键代码,项目结构和基本代码以及CSS样式大家可以自己添加。
我们按照功能进行分布完成。
1、存储功能
这里我们要完成,当用户输入姓名和手机号时,自己的信息存储到Web Storage中,html中代码如下:
XML/HTML Code复制内容到剪贴板以上代码是一个表单,用户输入姓名和手机号后,点击新增记录,即可在本地中保存姓名-手机号键值对。具体的js中save函数代码如下:
JavaScript Code复制内容到剪贴板Save函数的逻辑很简单,就是取出用户输入的值,然后利用localStorage的setItem功能以键值对的形式将信息存储到Web Storage中。
2、查找功能
查找功能需要实现,当用户输入某个电话号码时,显示数据库中对应查找信息。HTML代码如下:
XML/HTML Code复制内容到剪贴板其中result区域用来放置查询的结果。下面给出js中find函数的相关代码:
JavaScript Code复制内容到剪贴板先获取用户输入的手机号,然后利用getItem放大从数据库中获取手机号为这个的用户名,最后一同显示在result区域中。
以上两个是最基本的功能,我们将会继续探索本地存储的高级用法,以及如何在移动应用中自如的运用本地存储功能。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本地存储特性。Html5技术的Html5APPCache和本地存储功能能够使网页的启动更快速和便捷,且不需使用任何插件,本地存储功能可以实现将数据完整保存,即使
HTML5提供的本地存储功能,使得web应用可以将数据存储在用户的本地浏览器。在HTML5中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不
HTML5现在已经不是SGML的子集,主要是增加了关于图像,位置,存储,多任务等功能。绘画CANVAS;用于播放媒体的video和audio元素;本地离线存储l
html5的一个非常cool的功能,就是webstorage,类似于之前的cookie,不过与之不同的是,webstorage拥有本地5兆的容量可以存储,而co
HTML5现在已经不是SGML的子集,主要是增加了关于图像,位置,存储,多任务等功能。HTML5是HTML4的升级版本,相比于后者,HTML5增加了Web网页的