• 提升品牌形象
  • 最新HTML5+Css3网站制作技术
  • 完全区分与同行的震撼视觉体验
  • 自动适应平板、手机及电脑屏幕
  • 详细介绍
  • 企业网站入门首选
  • 强大丰富的系统功能
  • 超过1000种页面风格
  • 每年仅需¥1500元,两年仅需¥2000元
  • 详细介绍
  • 4000/4006两种开头选择
  • 智能占线、断线呼转
  • 高达300组可呼转号码
  • 智能语音导航
  • 详细介绍

If you have any question,please contact with us.

  • 昆明网站建设-在线客服

    蛋切刀 一指
    妖异眼瞳
  • 昆明网站设计-服务电话

    4000-555-94113099998627
  • 昆明网站建设-联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101

HTML5 实例-微设计创意工坊 为您提供 昆明网站制作 昆明网站建设 昆明网站设计 云南网站建设 昆明网络公司

  • Home
  • /
  • HTML5 实例
实例8-6 管理localStorage数据

实例8-6 管理localStorage数据

1.功能描述

在实例8-5的基础上,添加输入查询内容的文本框与“查询”按钮;同时,在列表内容项中新增“编辑”与“删除”链接。单击“查询”按钮时,可以根据输入的“学号”,返回对应的记录;单击“编辑”与“删除”链接时,分别实现根据键名更新或删除对应的键值数据。

2.实现代码

在DreamweaverCS5中新建一个HTML页面8-6.html,加入代码如代码清单8-6所示。

代码清单8-6 管理localStorage数据

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>管理localStorage数据</title>
	<link href="Css/css8.css" rel="stylesheet" type=”text/css">
	<script type="text/javascript" language="jscript"
	        src="Js/js6.js"/>
	</script>
	</head>
	<body onLoad=flgetlocalData(0);">
	   <ul id="ulMessage">
	       正在读取数据...
	   </ul>
	   <p class="p5">
	      <span class="spanl">
	      学号:<input type="text" readonly="true" id="txtStuID"
	                   class="inputtxt" size="10"><br>
	      姓名:<input type="text" id="txtName" class="inputtxt"
	                   size="15">
	      </span>
	      <span class="spanr">
	      性别:<select id="selSex">
	              <option value="男">男</option>
	              <option value="女">女</option>
	            </select><br>
	      总分:<input type="text" id="txtScore" class="inputtxt"
	                   size="8">
	      </span>
	      <p class="btn">
	     <input id="btnAdd" type="button" value="增加"
	            class="inputbtn" onClick=nbtnAdd_Click();">
	      </p>
	    </p>
	</body>
	</html>

在代码清单8-6中,页面导入一个JavaScript文件js6.js,其中自定义多个函数,分别在实现增加、删除、更新、查询功能时调用。其实现的代码如下所示:

	//JavaScript Document
	function $$(id){
	    return document.getElementByld(id);
	}
	//单击“增加”按扭时调用
	function btnAdd_Click(){
	    var strStuID=$$("txtStuID").value;
	    var strName=$$("txtName").value;
	    var strSex=$$("selSex").value;
	    var strScore=$$("txtScore").value;
	    if(strName.length>0 && strScore.length>0){
	       //定义一个实体对象,保存全部获取的值
	       var setData=new Object;
	       setData.StuID=strStuID;       setData.Name=strName;
	       setData.Sex=strSex;
	       setData.Score=strScore;
	       var strTxtData=JSON.stringify(setData);
	       localStorage.setltem(strStuID,strTxtData);
	    }
	    //重新加载
	    getlocalData(0);
	    //清空原先内容
	    $$("txtName").value="";
	    $$("txtScore").value=
	}
	//单击"查询”按扭时调用
	function btnSearch_Click(){
	    //获取查询学号
	    var strSearch=$$("txtSearchn).value;
	    //根据学号键名获取数据
	    getlocalData(strSearch);
	}
	//获取保存数据并显示在页面中
	function getlocalData(s){
	    //标题部分
	    var strHTML="<li>";
	    strHTML +="请输入学号:";
	    strHTML +="<input type='text' id='txtSearch'";
	    strHTML +="class='inputtxt' size='22'";
	    strHTML +="<input id='btnSearch' type='button' value='查询'";
	    strHTML +="class='inputbtn' onClick='btnSearch_Click();'>";
	    strHTML +="</li>";
	    strHTML +="<li class='li_h'>";
	    strHTML +="<span class='spn_a'>学号</span>";
	    strHTML +="<span class='spn_a'>姓名</span>";
	    strHTML +="<span class='spn_c'>性别</span>";
	    strHTML +="<span class='spn_c'>总分</span>";
	    strHTML +="<span class='spn_d'>操作</span>";
	    strHTML +="</li>";
	    if (s) {
	        var SearchData=JSON.parse(localStorage.getItem(s));
	        strHTML +="<li class='li_c'>";
	        strHTML +="<span class='spn_a'>"+SearchData.StuID+"</span>";
	        strHTML +="<span class='spn_a'>"+SearchData.Name+"</span>";
	        strHTML +="<span class='spn_c'>"+SearchData.Sex+"</span>";
	        strHTML +="<span class='spn_a'>"+SearchData.Score+"</span>";
	        strHTML +="<span class='spn_d'>";
	        strHTML +="<a href='#' onclick=EditData("+s+")>"编辑</a>";
	        strHTML +="&nbsp;|&nbsp;";
	        strHTML +="<a href='#' onclick=DeleteData("+s+")>"删除</a>";
	        strHTML += "</span></li>";
	    }else{
	        for (var intI=0;intI<localStorage.lenght;intI++){
	             //获取Key值
	             var strKey=localStorage.key(intI);
	             //过滤键名内容
	             if(strkey/substring(0,3)=="stu"){
	                var GetDate=JSON.parse(localStorage.getItem(strKey));
	                strHTML +="<li class='li_c'>";
	                strHTML +="<span class='spn_a'>"+GeDate.StuID+"</span>";
	                strHTML +="<span class='spn_a'>"+GeDate.Name+"</span>";
	                strHTML +="<span class='spn_c'>"+GeDate.Sex+"</span>";
	                strHTML +="<span class='spn_c'>"+GeDate.Score+"</span>";
	                strHTML +="<span class='spn_d'>"
	                strHTML +="<a href='#' onClick=EditData('";
	                strHTML +=GetData.StuID;
	                strHTML +="')>编辑</a>";
	                strHTML +="&nbsp;|&nbsp;";
	                strHTML +="<a href='#' onClick=DeleteData('";
	                strHTML +=GetData.StuID;
	                strHTML +="')>删除</a>";
	                strHTML +="</span></li>";
	             }
	        }
	    }
	    $$("ulMessage").innerHTML=strHTML;
	    $$("txtStuID").value="stu"+RetRndNum(4);
	}
	//单击“编辑”链接时调用
	function EditData(k){
	    //根据键名获取对应数据
	    var EditData=JSON.parse(localStorage.getltem(k));
	    $$("txtStuID").value=EditData.StuID;
	    $$("txtName").value=EditData.Name;
	    $$("selSex").value=EditData.Sex;
	    $$("txtScore").value=EditData.Score;
	}
	//单击“删除”链接时调用
	function DeleteData(k){
	    //删除指定键名对应的数据
	    localStorage.removeItem(k);
	    //重新加载
	    getlocalData(0);
	}
	//生成指定长度的随机数
	function RetRndNum(n){
	    var strRnd="";
	    for(var intI=0;intI<n;intI++){
	       strRnd+=Math.floor(Math.random()*10〉;
	    }
	    return strRnd;
	}

3.页面效果

该页面在Chrome10浏览器中执行的页面效果如图8-6所示。

图8-6 管理localStorage数据

4.源码分析

与实例8-5相比,本实例增加了编辑、删除对应数据的功能。首先,为了实现根据键名查询数据的功能,对实例8-5中的getlocalDataO函数据进行了改造,新添加了一个参数s。如杲这个参数有值,表示需要将该值作为键名,调用“JSON.:parse(localStorage.getItem(s))”语句。获取对应的键值数据并转成JSON对象后,保存到对象变量SearchData中,通过该对象的属性显示各项保存的键值数据,并展示在页面中。

为了实现对键值数据的“编辑”功能,新增加一个自定义函数EditData(),通过该函数中的参数k,获取编辑时传回的键名。根据该键名,调用“JSON.parse(localStorage.getItem(k))”语句,将获取的键值数据转成JSON对象,并保存至对象变量EditData中,将对象属性的各项键值赋给页面中对应的文本框与下拉列表。当用户再次单击“增加”按钮时,将按照获取的键名更新对应的键内容,从而实现保存数据更新的功能。

为了可以根据键名删除对应键值记录,新增加另外一个自定义函数DeleteData(),通过该函数中的参数k,获取编辑时传回的键名。根据该键名,使用“localStorage.removeltem(k)”语句,删除丨ocalStorage对象中指定键名的数据;删除完成后,重新调用getlocalData()函数,在页面中显示删除后的数据信息。

其他功能的实现与实例8-5基本相同,不再赘述,详细过程如代码中加粗部分所示。

本文由昆明网站建设,昆明微设计整理发布,转载请保留链接


  • If you have any question,please contact with us.

  • QQ在线客服

    蛋切刀
    可乐上瘾
    妖异眼瞳
  • 服务电话

    4000-555-94113099998627
  • 联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101