<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>HTML5 LocalStorage Demo</title>

<style type="text/css">
* {
line-height: 10pt;
}

.table {
border: 0;
background-color: azure;
}

.table_head {
background-color: cornsilk;
text-align: center;
}

.msgColor {
color: red;
}
</style>

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" language="javascript">
var KeyWord = "Emp_Obj";

$(document).ready(function () {
init(GetLocalStorage(KeyWord));
});

function init(jsons) {
var htmlStr = "<table class='table'>";
htmlStr = htmlStr + "<tr class='table_head'>";
htmlStr = htmlStr + "<td>员工编号</td>";
htmlStr = htmlStr + "<td>员工姓名</td>";
htmlStr = htmlStr + "<td>员工性别</td>";
htmlStr = htmlStr + "<td>员工年龄</td>";
htmlStr = htmlStr + "<td>员工职位</td>";
htmlStr = htmlStr + "<td>操作</td>";
htmlStr = htmlStr + "</tr>";

var jsonStrs = jsons;
if (checkStorageValue(jsonStrs)) {
jsonStrs = JSON.parse(jsonStrs);

for (var i = 0; i < jsonStrs.length; i++) {
htmlStr = htmlStr + "<tr>";
htmlStr = htmlStr + "<td>" + jsonStrs[i].ID + "</td>";
htmlStr = htmlStr + "<td>" + jsonStrs[i].Name + "</td>";
htmlStr = htmlStr + "<td>" + jsonStrs[i].Sex + "</td>";
htmlStr = htmlStr + "<td>" + jsonStrs[i].Age + "</td>";
htmlStr = htmlStr + "<td>" + jsonStrs[i].Job + "</td>";
htmlStr = htmlStr + "<td><label id='DelLink' style='cursor:pointer ;' onclick='DelEmpStorage(" + jsonStrs[i].ID + ")' >删除</label></td>";
htmlStr = htmlStr + "</tr>";
}

} else {
htmlStr = htmlStr + "<tr>";
htmlStr = htmlStr + "<td clospan='6'>暂无员工信息...</td></tr>";
}

htmlStr = htmlStr + "</table>";
$("#EmpView").html(htmlStr);
};

$(function () {
//查询-读取LocalStorage[Key]
$("#InquiryBtn").click(function () {
var InquiryKey = $("#InquiryKey").val();
if (InquiryKey.trim() == "") {
init(GetLocalStorage(KeyWord));
return false;
}
$("#InqueryErrorMsg").html("");

var jsonStrs = GetLocalStorage(KeyWord);
if (checkStorageValue(jsonStrs)) {
jsonStrs = JSON.parse(jsonStrs);

var IsExistence = false;
for (var i = 0; i < jsonStrs.length; i++) {
if (jsonStrs[i].ID == InquiryKey) {
init("[" + JSON.stringify(jsonStrs[i]) + "]");
IsExistence = true;
break;
}
}

if (IsExistence == false) $("#InqueryErrorMsg").html("没有找到此员工信息!");

} else {
$("#InqueryErrorMsg").html("不存在LocalStorage : Key :" + KeyWord);
}

});

//保存-写入LocalStorage
$("#saveBtn").click(function () {
var e_ID = $("#txt_ID").val();
var e_Name = $("#txt_Name").val();
var e_Sex = $("#sel_Sex option:selected").text();
var e_Age = $("#txt_Age").val();
var e_Job = $("#txt_Job").val();

var values = "";
var jsonStrs = GetLocalStorage(KeyWord);

if (checkStorageValue(jsonStrs)) {
var strs = JSON.parse(jsonStrs)

var EmpObjJSON = {
"ID": e_ID,
"Name": e_Name,
"Sex": e_Sex,
"Age": e_Age,
"Job": e_Job
};

strs.push(EmpObjJSON);
values = strs;
} else {
var EmpObjJSON = [{
"ID": e_ID,
"Name": e_Name,
"Sex": e_Sex,
"Age": e_Age,
"Job": e_Job
}];

values = EmpObjJSON;
}

SetLocalStorage(KeyWord, values);
});
});

//删除员工信息
function DelEmpStorage(e_Id) {
//alert(e_Id);
var jsonStrs = GetLocalStorage(KeyWord);
jsonStrs = JSON.parse(jsonStrs);
for (var i = 0; i < jsonStrs.length ; i++) {
if(jsonStrs[i].ID == e_Id )
{
jsonStrs.splice(i, 1);
}
} 
SetLocalStorage(KeyWord, jsonStrs);

}

//LocalStorage写入
//Method(Key,Value)
function SetLocalStorage(Key, Value) {
try {
localStorage.setItem(Key, JSON.stringify(Value));

$("#saveMsg").html("");
} catch (e) {
$("#saveMsg").html("LocalStorage Error: " + e);
}

init(GetLocalStorage(KeyWord));
}

//LocalStorage读取
//Method(Key)
function GetLocalStorage(Key) {
var result = "";

try {
result = localStorage.getItem(Key);

$("#InqueryErrorMsg").html("");
} catch (e) {
$("#InqueryErrorMsg").html("LocalStorage Error: GetItem(Key)" + e);
}

return result;
}

//检查本地存储值
function checkStorageValue(value)
{
var result = false;
var jsonStrs = value;
if (jsonStrs != null && jsonStrs != "") {
result = true;
}
return result;
}

</script>

</head>
<body>
<h1>HTML5 LocalStorage Demo</h1>
<input type="text" id="InquiryKey" />
<button type="button" id="InquiryBtn">查询</button>
<label id="InqueryErrorMsg" class="msgColor"></label>
<br />
<br />

员工编号：<input type="text" id="txt_ID" /><br /><br />
员工姓名：<input type="text" id="txt_Name" /><br /><br />
员工性别：<select id="sel_Sex">
<option value="1">男</option>
<option value="2">女</option>
<option value="0">未知</option>
</select><br /><br />
员工年龄：<input type="text" id="txt_Age" /><br /><br />
员工职位：<input type="text" id="txt_Job" /><br /><br />
<button type="button" id="saveBtn">保存</button>
<div id="saveMsg" class="msgColor"></div>
<br />
<br />

<div id="EmpView"></div>
</body>
</html>

HTML5的localStorage演示

HTML5 LocalStorage Demo的更多相关文章

  1. HTML5 LocalStorage 本地存储

    HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就 ...

  2. (转载)HTML5 LocalStorage 本地存储

    原文地址:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地 ...

  3. localStorage存值取值以及存取JSON,以及基于html5 localStorage的购物车

    localStorage.setItem("key","value");//存储变量名为key,值为value的变量 localStorage.key = &q ...

  4. HTML5 LocalStorage 本地存储（转）

    原文:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地存储 ...

  5. 原生JavaScript常用本地浏览器存储方法四(HTML5 LocalStorage sessionStorage)

    HTML5 LocalStorage浏览器的支持的情况如上图,IE在8.0的时候就支持了.不过需要注意的是,IE测试的时候需要服务器环境(或者localhost). 测试自然是检测浏览器是否支持本地存 ...

  6. 【HTML5 localStorage本地储存】简介&基本语法

    了解localStorage localStorage是最新的HTML5中的新技术,它主要是用于本地储存.最近看了看localStorage,发现比cookie好多用了,还比cookie简单多了.于是 ...

  7. HTML5 LocalStorage 本地存储原理详解

    首先自然是检测浏览器是否支持本地存储.在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在 ...

  8. HTML5 ---localStorage

    HTML5中提供了localStorage对象可以将数据长期保存在客户端,直到人为清除. localStorage提供了几个方法: 1.存储:localStorage.setItem(key,valu ...

  9. html5 localStorage实现表单本地存储

    随笔开头,我不得不吐槽,为什么我的随笔每次发布之后,都会在分分钟之内移出首页.好气啊!! 进入正题了,项目中有许多表单输入框要填写,还有一些单选复选框之类的.用户可能在填写了大量的信息之后,不小心刷新 ...

随机推荐

  1. HDFS文件系统

    Hadoop 附带了一个名为 HDFS(Hadoop分布式文件系统)的分布式文件系统,专门存储超大数据文件,为整个Hadoop生态圈提供了基础的存储服务. 本章内容: 1) HDFS文件系统的特点,以 ...

  2. vconsole使用

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  3. python 爬虫气象气象定时报 气象预警推送

    "2018-04-09 14时""长沙市""10日(明天)""多云转雷阵雨""29℃""1 ...

  4. C# 查找其他应用程序并打开、显示、隐藏、关闭

    软件开发中,有时迫不得已要用到第三方的软件,这时就涉及到在C#应用程序需要对第三方软件打开.显示.隐藏以及关闭. 下面列举了几个常用的方式 打开应用程序,下面是2种简单用法: 第一种: public ...

  5. maven学习系列 之 常见问题

    1.新建的maven项目无法修改 Project Facets 的 Dynamic Web Module 版本 RE: 在工程目录下有一个.settings文件夹,打开org.eclipse.wst. ...

  6. 27.OGNL与ValueStack(VS)-获取Stack Context中的信息

    转自:https://wenku.baidu.com/view/84fa86ae360cba1aa911da02.html 我们知道,除了可以从值栈中获取信息,还可以从Stack Context中获取 ...

  7. Cordova+Vue构建Hybrid APP简易实操

    当下APP市场,因为Native APP开发成本高,Web APP不稳定,混合开发APP大行其道,成为越来越多开发者的首选.Hybrid APP开发框架也比较多,Weex.Ionic.PhoneGap ...

  8. 使用 Zend_Studio 开发

    之前一直用vim 写PHP, 总觉得IDE的一大堆没有用的插件非常麻烦,所以一直避免使用Zend_Studio.不过随着PHP的发展和框架的发展,以及个人的发展,最后还是回到的IDE的时代. 在使用Z ...

  9. eclipse里启动tomcat无法通过127.0.0.1访问

    在eclipse里面添加tomcat,再发布一个web项目进去,然后启动tomcat,日志显示tomcat在eclipse里面正常启动,hosts里面配置了ip跟域名的对应关系. 通过域名访问可以正常 ...

  10. C#泛型序列化困境

    [C#泛型序列化困境] 问题的起因是这样,有一个需求,将JsonArray转化为List,JsonArray中的元素均是string,此string可被转化为int.float.或维持string.我 ...