探索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 background属性调整增强介绍
Dec 18 HTML / CSS
基于css3的属性transition制作菜单导航效果
Sep 01 HTML / CSS
利用CSS3实现平移动画效果示例代码
Oct 12 HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 HTML / CSS
HTML5 画布canvas使用方法
Mar 18 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
Jun 01 HTML / CSS
Html5实现首页动态视频背景的示例代码
Sep 25 HTML / CSS
html5利用canvas实现颜色容差抠图功能
Dec 23 HTML / CSS
AmazeUI 评论列表的实现示例
Aug 13 HTML / CSS
html+css 实现简易导航栏功能
Apr 07 HTML / CSS
如何在CSS中绘制曲线图形及展示动画
May 24 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 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
php4的彩蛋
2006/10/09 PHP
单点登录 Ucenter示例分析
2013/10/29 PHP
PHP中模拟链表和链表的基本操作示例
2016/02/27 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
dojo 之基础篇
2007/03/24 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
jquery+css3打造一款ajax分页插件(自写)
2014/06/18 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
2017/02/22 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
Python对象与引用的介绍
2019/01/24 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
python中rb含义理解
2020/06/18 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
C#里面可以避免一个类被其他类继承么?如何?
2013/09/26 面试题
高一物理教学反思
2014/01/24 职场文书
《晚上的太阳》教学反思
2014/04/23 职场文书
城市规划应届毕业生自荐信
2014/07/04 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
采购员工作总结范文
2015/08/12 职场文书
如何用python绘制雷达图
2021/04/24 Python
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技