探索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 position fixed固定居中问题解决方案
Aug 19 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 HTML / CSS
Html5中的桌面通知Notification的实现
Sep 25 HTML / CSS
HTML5中的Article和Section元素认识及使用
Mar 22 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
Apr 21 HTML / CSS
利用html5的websocket实现websocket聊天室
Dec 12 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
Oct 15 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 HTML / CSS
HTML5 Canvas入门学习教程
Mar 17 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 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
56.com视频采集接口程序(PHP)
2007/09/22 PHP
PHP面向对象教程之自定义类
2014/06/10 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
php实现评论回复删除功能
2017/05/23 PHP
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
vue 弹出遮罩层样式实例
2020/07/22 Javascript
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
Python数据类型之Set集合实例详解
2019/05/07 Python
python调用并链接MATLAB脚本详解
2019/07/05 Python
Python 一行代码能实现丧心病狂的功能
2020/01/18 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
一名毕业生的自我鉴定
2013/12/04 职场文书
自我鉴定书面格式
2014/01/13 职场文书
西式结婚主持词
2014/03/14 职场文书
新春寄语大全
2014/04/09 职场文书
酒店节能降耗方案
2014/05/08 职场文书
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
浅析Python实现DFA算法
2021/06/26 Python