探索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 相关文章推荐
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
CSS3媒体查询Media Queries基础学习教程
Feb 29 HTML / CSS
css3 矩阵的使用详解
Mar 20 HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 HTML / CSS
HTML5 video视频字幕的使用和制作方法
May 03 HTML / CSS
HTML5 Canvas入门学习教程
Mar 17 HTML / CSS
html5唤醒APP小记
Mar 27 HTML / CSS
canvas实现烟花的示例代码
Jan 16 HTML / CSS
html5表单的required属性使用
Jul 07 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 HTML / CSS
css常用字体属性与背景属性介绍
Feb 28 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+java实现自动新闻滚动窗口
2006/10/09 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
怎么用javascript进行拖拽
2006/07/20 Javascript
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
jQuery TextBox自动完成条
2009/07/22 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
2015/11/17 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
Python生成随机密码的方法
2017/06/16 Python
解决Python获取字典dict中不存在的值时出错问题
2018/10/17 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
C#中的验证控件有几种
2014/03/08 面试题
linux面试题参考答案(7)
2014/07/24 面试题
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
建筑行业的大学生自我评价
2013/12/08 职场文书
经理聘任证明
2015/03/02 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
电影开国大典观后感
2015/06/04 职场文书
商业计划书格式、范文
2019/03/21 职场文书
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android