HTML5 Localstorage Demo

<! DOCTYPE html>

<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> employee number </td>";
Htmlstr = htmlstr + "<td> Employee name </td>";
Htmlstr = htmlstr + "<td> employee gender </td>";
Htmlstr = htmlstr + "<td> employee age </td>";
Htmlstr = htmlstr + "<td> employee position </td>";
Htmlstr = htmlstr + "<td> operations </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 + ") ' > Delete </label></td>";
Htmlstr = htmlstr + "</tr>";
}

} else {
Htmlstr = htmlstr + "<tr>";
Htmlstr = Htmlstr + "<td clospan= ' 6 ' > No employee Information ...</td></tr>";
}

Htmlstr = htmlstr + "</table>";
$ ("#EmpView"). HTML (HTMLSTR);
};

$ (function () {
Query-Read 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 ("No information found for this employee!");

} else {
$ ("#InqueryErrorMsg"). HTML ("Localstorage:key not present:" + KeyWord);
}

});

Save-write 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);
});
});

Delete Employee information
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 Write
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 Read
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;
}

Check local store values
function Checkstoragevalue (value)
{
var result = false;
var jsonstrs = value;
if (jsonstrs! = NULL && jsonstrs! = "") {
result = true;
}
return result;
}

</script>

<body>
<H1>HTML5 Localstorage demo<input type= "text" id= "Inquirykey"/>
<button type= "button" id= "inquirybtn" > Query </button>
<label id= "inqueryerrormsg" class= "Msgcolor" ></label>
<br/>
<br/>

Employee Number: <input type= "text" id= "txt_id"/><br/><br/>
Employee Name: <input type= "text" id= "txt_name"/><br/><br/>
Employee Gender: <select id= "Sel_sex" >
<option value= "1" > Men </option>
<option value= "2" > Women </option>
<option value= "0" > Unknown </option>
</select><br/><br/>
Employee Age: <input type= "text" id= "txt_age"/><br/><br/>
Staff position: <input type= "text" id= "txt_job"/><br/><br/>
<button type= "button" id= "Savebtn" > Save </button>
<div id= "savemsg" class= "Msgcolor" ></div>
<br/>
<br/>

<div id= "Empview" ></div>
</body>

Copy to Google TranslateTranslation ResultsHTML5the LocalstorageDemo

HTML5 Localstorage Demo