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


Posted in HTML / CSS onMarch 02, 2016

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

1、存储功能

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

XML/HTML Code复制内容到剪贴板
  1. <form>     
  2.      <labelforlabelforlabelforlabelfor=”username”>姓名:</label>     
  3.      <inputtypeinputtypeinputtypeinputtype=”text” id=”username” name=”username” />     
  4.      <labelforlabelforlabelforlabelfor=”mobilephone”>手机号:</label>     
  5. <input type=”text” id=”mobilephone”name=”mobilephone” />     
  6.        </form>     
  7.        <input type=”button” onclick=”save()”vale=”新增记录” />     
  8. </form>     

以上代码是一个表单,用户输入姓名和手机号后,点击新增记录,即可在本地中保存姓名-手机号键值对。具体的js中save函数代码如下:

JavaScript Code复制内容到剪贴板
  1. function save(){     
  2.      var mobilePhone= document.getElementById(“mobilephone”).value;     
  3.      var userName= dpcument.getElementById(“username”).value;     
  4. localStorage.setItem(mobilePhone,userName);     
  5. }     

Save函数的逻辑很简单,就是取出用户输入的值,然后利用localStorage的setItem功能以键值对的形式将信息存储到Web Storage中。

2、查找功能

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

XML/HTML Code复制内容到剪贴板
  1. <label for=”search”>请输入手机号:</label>     
  2.      <input type=”text" id=”search”name=”search” />     
  3.      <input type=”button” onclick=”find()”value=”查找”>     
  4.      <p id=”result”><p>     

其中result区域用来放置查询的结果。下面给出js中find函数的相关代码:

JavaScript Code复制内容到剪贴板
  1. function find(){     
  2.      var search =document.getElementById(“search”).value;     
  3.      var name = localStorge.gteItem(search);     
  4.      var result =document.getElementById(“result”);     
  5.      result.innerHTML= search + “:” + name;     
  6. }    

先获取用户输入的手机号,然后利用getItem放大从数据库中获取手机号为这个的用户名,最后一同显示在result区域中。

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

HTML / CSS 相关文章推荐
CSS3 简写animation
May 10 HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
CSS中越界问题的经典解决方案【推荐】
Apr 19 HTML / CSS
使用CSS变量实现炫酷惊人的悬浮效果
Apr 26 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
HTML5的结构和语义(2):结构
Oct 17 HTML / CSS
Html5实现文件异步上传功能
May 19 HTML / CSS
小程序canvas中文字设置居中锚点
Apr 16 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 #HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 #HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
Mar 01 #HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
Mar 01 #HTML / CSS
解析HTML5中的新功能本地存储localStorage
Mar 01 #HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 #HTML / CSS
HTML5中meta属性的使用方法
Feb 29 #HTML / CSS
You might like
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
微信公众平台接口开发入门示例
2014/12/24 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
[47:45]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第一场 2月26日
2021/03/11 DOTA
Python实现在线音乐播放器
2017/03/03 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
pandas 条件搜索返回列表的方法
2018/10/30 Python
django settings.py 配置文件及介绍
2019/07/15 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
护士自我评价
2014/02/01 职场文书
《这儿真好》教学反思
2014/02/22 职场文书
应届毕业生自荐信例文
2014/02/26 职场文书
继承公证书样本
2014/04/04 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
服装区域经理岗位职责
2015/04/10 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python
python读取pdf格式文档的实现代码
2021/04/01 Python
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS
Python标准库之typing的用法(类型标注)
2021/06/02 Python
python使用pymysql模块操作MySQL
2021/06/16 Python
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android