我们来实现一个简单应用,该应用中用户输入用户名和手机号,相关因袭可以保存到保存到本地,并可以进行查找、展示等基本操作。
以下只给我出关键代码,项目结构和基本代码以及CSS样式大家可以自己添加。
我们按照功能进行分布完成。
1、存储功能
这里我们要完成,当用户输入姓名和手机号时,自己的信息存储到Web Storage中,html中代码如下:
以上代码是一个表单,用户输入姓名和手机号后,点击新增记录,即可在本地中保存姓名-手机号键值对。具体的js中save函数代码如下:
Save函数的逻辑很简单,就是取出用户输入的值,然后利用localStorage的setItem功能以键值对的形式将信息存储到Web Storage中。
2、查找功能
查找功能需要实现,当用户输入某个电话号码时,显示数据库中对应查找信息。HTML代码如下:
其中result区域用来放置查询的结果。下面给出js中find函数的相关代码:
先获取用户输入的手机号,然后利用getItem放大从数据库中获取手机号为这个的用户名,最后一同显示在result区域中。
以上两个是最基本的功能,我们将会继续探索本地存储的高级用法,以及如何在移动应用中自如的运用本地存储功能。
2021年520前夕。近一年来主要都在做业务,不过对不断提升Coding质量与速度的追求...
迁移数据库可以说是日常工作常有的事,不过,如果一不小心把数据库搞炸了,那就...
不知道从什么时候开始,在网络上到处可以看到div+css,到底什么是div+css呢?难...
前言 演示下太老版本浏览器的渐变实现了[IE9-]; IE9以前,渐变都是通过滤镜实现的...
在使用 justify-content:space-between 布局时,针对最后一行元素使用 justify-s...
去年, 民工哥的新书 出版之后,就有不少读者经常来加我微信好友,一起探讨如何...
先来看下iPhone X机型的样子 上图中,Iphonex机型在头部和底部新增了这两个区域...
提起国外云巨头,不外乎亚马逊AWS、微软AZURE、谷歌云以及IBM等等。而亚马逊AWS...
很多朋友使用Dreamweaver一段时间后,开始热衷于寻找各式各样的插件,追求各种各...
注册域名 com备案多长时间?如果已经注册好 .com域名 ,只是等着备案的话,一般...