HTML5 LocalStorage Demo
<!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>
