Html5 web本地存储实例详解


Posted in HTML / CSS onJuly 28, 2016

Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Storage官方建议为每个网站5MB。

Web Storage又分为两种:

sessionStorage

localStorage

从字面意思就可以很清楚的看出来,sessionStorage将数据保存在session中,浏览器关闭也就没了;而localStorage则一直将数据保存在客户端本地;

不管是sessionStorage,还是localStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):

保存数据:localStorage.setItem(key,value);读取数据:localStorage.getItem(key);删除单个数据:localStorage.removeItem(key);删除所有数据:localStorage.clear();得到某个索引的key:localStorage.key(index);

如上,key和value都必须为字符串,换言之,web Storage的API只能操作字符串。

接下来,我们通过Web Storage开发一个简单的通讯录小程序,以演示相关API的使用方法;我们要实现如下功能:

录入联系人,联系人有姓名、手机号码2个字段,以手机号作为key存入localStorage;根据手机号码,查找机主;列出当前已保存的所有联系人信息;

首先先写一个简单的html代码

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEHTML>    
  2. <html>    
  3. <head>    
  4. <metacharsetmetacharset="utf-8"/>    
  5. <title>HTML5本地存储之WebStorage篇</title>    
  6. </head>    
  7. <body>  
  8. <divstyledivstyle="border:2pxdashed#ccc;width:320px;text-align:center;">  
  9. <labelforlabelfor="user_name">姓名:</label>  
  10. <inputtypeinputtype="text"id="user_name"name="user_name"class="text"/>  
  11. <br/>  
  12. <labelforlabelfor="mobilephone">手机:</label>  
  13. <inputtypeinputtype="text"id="mobilephone"name="mobilephone"/>  
  14. <br/>  
  15. <inputtypeinputtype="button"onclick="save()"value="新增记录"/>  
  16. <hr/>  
  17. <labelforlabelfor="search_phone">输入手机号:</label>  
  18. <inputtypeinputtype="text"id="search_phone"name="search_phone"/>  
  19. <inputtypeinputtype="button"onclick="find()"value="查找机主"/>  
  20. <pidpid="find_result"><br/></p>  
  21. </div>  
  22. <br/>  
  23. <dividdivid="list">  
  24. </div>  
  25. </body>  
  26. </html>  

写完页面的话,展示效果差不多就是如下图:

Html5 web本地存储实例详解

要实现联系人的保存,只需要简单实现如下JS方法即可:

XML/HTML Code复制内容到剪贴板
  1. functionsave(){   
  2. varmobilephone=document.getElementById("mobilephone").value;   
  3. varuser_name=document.getElementById("user_name").value;   
  4. localStorage.setItem(mobilephone,user_name);   
  5. } //用于保存数据  

要实现查找机主,则实现如下JS方法:

XML/HTML Code复制内容到剪贴板
  1. //查找数据   
  2. functionfind(){   
  3. varsearch_phone=document.getElementById("search_phone").value;   
  4. varname=localStorage.getItem(search_phone);   
  5. varfind_result=document.getElementById("find_result");   
  6. find_result.innerHTML=search_phone+"的机主是:"+name;   
  7. }  

Html5 web本地存储实例详解

要展现所有已保存的联系人信息,则需要使用localStorage.key(index)方法,如下:

XML/HTML Code复制内容到剪贴板
  1. //将所有存储在localStorage中的对象提取出来,并展现到界面上   
  2. functionloadAll(){   
  3. varlist=document.getElementById("list");   
  4. if(localStorage.length>0){   
  5. varresult="<tableborder='1'>";   
  6. result+="<tr><td>姓名</td><td>手机号码</td></tr>";   
  7. for(vari=0;i<localStorage.length;i++){   
  8. varmobilephone=localStorage.key(i);   
  9. varname=localStorage.getItem(mobilephone);   
  10. result+="<tr><td>"+name+"</td><td>"+mobilephone+"</td></tr>";   
  11. }   
  12. result+="</table>";   
  13. list.innerHTML=result;   
  14. }else{   
  15. list.innerHTML="目前数据为空,赶紧开始加入联系人吧";   
  16. }   
  17. }  

效果如下:

Html5 web本地存储实例详解

问题:如上的演示,都只有2个字段,姓名和手机号码,如果要存入更为丰富的联系人信息,比如公司名称、家庭地址等,如何实现呢?Web Storage不是只能处理字符串吗?此时,可以利用JSON的stringify()方法,将复杂对象转变成字符串,存入Web Storage中;当从Web Storage中读取时,可以通过JSON的parse()方法再转换成JSON对象;

如下简单演示增加了公司属性的联系人保存JS代码:

XML/HTML Code复制内容到剪贴板
  1. //保存数据    
  2. functionsave(){   
  3. varcontact=newObject;   
  4. contact.user_name=document.getElementById("user_name").value;   
  5. contact.mobilephone=document.getElementById("mobilephone").value;   
  6. contact.company=document.getElementById("company").value;   
  7. varstr=JSON.stringify(contact);   
  8. localStorage.setItem(contact.mobilephone,str);   
  9. loadAll();   
  10. }   
  11. //将所有存储在localStorage中的对象提取出来,并展现到界面上   
  12. functionloadAll(){   
  13. varlist=document.getElementById("list");   
  14. if(localStorage.length>0){   
  15. varresult="<tableborder='1'>";   
  16. result+="<tr><td>姓名</td><td>手机</td><td>公司</td></tr>";   
  17. for(vari=0;i<localStorage.length;i++){   
  18. varmobilephone=localStorage.key(i);   
  19. varstr=localStorage.getItem(mobilephone);   
  20. varcontact=JSON.parse(str);   
  21. result+="<tr><td>"+contact.user_name+"</td><td>"+contact.mobilephone+"</td><td>"+contact.company+"</td></tr>";   
  22. }   
  23. result+="</table>";   
  24. list.innerHTML=result;   
  25. }else{   
  26. list.innerHTML="目前数据为空,赶紧开始加入联系人吧";   
  27. }   
  28. }  

效果如下:

Html5 web本地存储实例详解

以上所述是小编给大家介绍的Html5 web本地存储实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
css动画效果之animation的常用样式
Mar 09 HTML / CSS
CSS3实现DIV圆角效果完整代码
Oct 10 HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
Oct 26 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
Jan 16 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
Aug 01 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 #HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 #HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
Jul 19 #HTML / CSS
HTML5和CSS3实例教程总结(推荐)
Jul 18 #HTML / CSS
HTML5 拖放功能实现代码
Jul 14 #HTML / CSS
HTML块级标签汇总(小篇)
Jul 13 #HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 #HTML / CSS
You might like
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
CodeIgniter模板引擎使用实例
2014/07/15 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
jquery 必填项判断表单是否为空的方法
2008/09/14 Javascript
javascript getElementsByClassName 和js取地址栏参数
2010/01/02 Javascript
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
jQuery $.extend()用法总结
2014/06/15 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
详解Document.Cookie
2015/12/25 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
js轮播图代码分享
2016/07/14 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
python 把列表转化为字符串的方法
2018/10/23 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
非功能性需求都包括哪些方面
2013/10/29 面试题
优秀民警事迹材料
2014/01/29 职场文书
遵纪守法演讲稿
2014/05/23 职场文书
大学生学生会工作总结2015
2015/05/26 职场文书
跑吧孩子观后感
2015/06/10 职场文书
整脏治乱工作简报
2015/07/21 职场文书
创业计划书之酒店
2019/08/30 职场文书