ตัวอย่างและโค้ดต่อไปนี้ เป็นการประยุกต์การใช้งานน localStorage แบบฐานข้อมูล
โดยในตัวอย่าง สามารถที่จะเพิ่มและลบข้อมูลได้ แต่ไม่ได้เพิ่มเติมในส่วนของ
การสามารถแก้ไขข้อมูล เนื่องจากข้อจำกัดของประเภทข้อมูล ที่เป็นรูปแบบ string
การประยุกต์ใช้งานในครั้งนี้ เป็นแนวทางสำหรับนำไปใช้ใน mobile app ได้
ในตัวอย่าง จะเป็นการใช้งานร่วมกับ jquery และ css bootstrap
ตัวอย่าง
บันทึกข้อมูลฟอร์มลงใน localStorage
| # | Name | Tel | Address | Del |
|---|
คำอธิบายแสดงในโค้ด
ไฟล์ index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<br>
<div style="margin:auto;width:80%;">
<h3> บันทึกข้อมูลฟอร์มลงใน localStorage </h3>
<form class="form" id="myFrom" method="post" role="form">
<div class="form-group">
<lable class="control-label">Name : </lable>
<input type="text" autocomplete="off" class="form-control" name="name">
</div>
<div class="form-group">
<lable class="control-label">Tel : </lable>
<input type="text" autocomplete="off" class="form-control" name="tel">
</div>
<div class="form-group">
<lable class="control-label">Address : </lable>
<input type="text" autocomplete="off" class="form-control" name="address">
</div>
<button type="submit" class="btn btn-primary">เพิ่มข้อมูล</button>
</form>
<br>
<table class="table table-striped">
<tr class="active">
<th>#</th>
<th>Name</th>
<th>Tel</th>
<th>Address</th>
<th width="35">Del</th>
</tr>
<tbody class="place-datarow">
<tr class="datarow" style="display:none;">
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<button type="button" class="btn btn-danger" onclick="deleteData(this);">X</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
ไฟล์ script.js
$(function () {
$("#myFrom").on("submit", function () {
// เก็บข้อมูลที่ส่งมาจากฟอร์มในรูปแบบ array object
var arrData = $(this).serializeArray();
// เริ่มการจัดรูปแบบชุดข้อมูลใหม่ ให้อยู่ในรูปแบบ object
var arrLength = arrData.length;
var strVal = "";
for (var s in arrData) {
strVal += arrData[s].name + ":'" + arrData[s].value+"'";
if (arrLength - 1 != s) {
strVal += ",";
} else {
strVal = "{" + strVal + "}";
}
}
// ถ้ามีข้อมูลอยู่แล้ว ให้เพิ่มเข้าไปต่อจากข้อมูลเดิม
if(localStorage.dataWeb){
// ดึงข้อมูลเดิมมาเก็บไว้ในตัวแปร array
var showDatas = JSON.parse("[" + localStorage.dataWeb + "]");
// หาจำนวนแถวข้อมูลทั้งหมด
var lengthData=showDatas.length;
// เพิ่มข้อมูลใหม่เก็บต่อจากข้อมูลเดิม
localStorage.dataWeb+=","+JSON.stringify(strVal);
// กำหนดตำแหน่งที่ต้องการแสดงรายการใหม่ในตาราง
var begin =lengthData;
}else{
// บักทึกข้อมูลครั้งแรก
localStorage.dataWeb=JSON.stringify(strVal);
// กำหนดตำแหน่งที่ต้องการแสดงรายการใหม่ในตาราง
var begin =0;
}
// หลังจากบันทึกข้อมูลแล้ว มีการแสดงข้อมูล
var showDatas = JSON.parse("[" + localStorage.dataWeb + "]");
for(var data in showDatas){// วันลูปแสดงข้อมูลตามถวข้อมูลที่มี
if(data>=begin){// ตำแหน่งเริ่มต้นต่อจากข้อมูลเดิม
// แปลงค่าข้อมูลเป็น object เพื่อเนียกใช้ค่าข้อมูล
var obj = eval("("+showDatas[data]+")");
// clone แถวแรกของตารางที่ซ่อนไว้ แล้ว แสดงข้อมูล
// โดยนำข้อมูลใส่ในคอลัมน์ให้ถูกต้อง
var placeObj=$(".datarow:eq(0)").clone(true)
.removeAttr("style")
.appendTo($(".place-datarow"));
placeObj.find("td:eq(0)").text(parseInt(data)+1);
placeObj.find("td:eq(1)").text(obj.name);
placeObj.find("td:eq(2)").text(obj.tel);
placeObj.find("td:eq(3)").text(obj.address);
}
}
// รีเซ็ตฟอร์มใหม่ ให้พร้อมกรอกข้อมูลใหม่
$(this)[0].reset();
return false;
});
// ตรวจสอบตอนเปิดมาครั้งแรก ถ้ามีข้อมูล ให้ไปเรียกใช้งานฟังก์ชั่นแสดงข้อมูล
if(localStorage.dataWeb){
showData(0);
}else{
// ซ่อนแถวแรกที่ไว้สำหรับ clone ถ้าไม่มีข้อมูล
$(".datarow").hide();
}
});
// ฟังก์ชั่นการแสดงข้อมูล โดยส่งค่าตำแหน่งที่ต้องการแสดงข้าไปด้วย
var showData = function (begin){
// ถ้ามีการข้อมูลที่บันทึก ใน localStorage ชื่อ dataWeb อยู่
if(localStorage.dataWeb!=""){
// แปลงคค่าข้อมูลเป็น array
var showDatas = JSON.parse("[" + localStorage.dataWeb + "]");
// วนลูปแสดงข้อมูล จากตัวแปร array
for(var data in showDatas){
if(data>=begin){ // ตำแหน่งข้อมูลเริีมต้นที่จะแสดง
// แปลงชุดข้อมูลเป็น object เพื่อเรียกแสดงค่าข้อมูล
var obj = eval("("+showDatas[data]+")");
// clone แถวแรกของตารางที่ซ่อนไว้ แล้ว แสดงข้อมูล
// โดยนำข้อมูลใส่ในคอลัมน์ให้ถูกต้อง
var placeObj=$(".datarow:eq(0)").clone(true)
.removeAttr("style")
.appendTo($(".place-datarow"));
placeObj.find("td:eq(0)").text(parseInt(data)+1);
placeObj.find("td:eq(1)").text(obj.name);
placeObj.find("td:eq(2)").text(obj.tel);
placeObj.find("td:eq(3)").text(obj.address);
}
}
}
};
// ฟังก์ชั่นการลบข้อมูล
var deleteData = function (obj){
// หาค่า index ตำแหน่งของแถวของข้อมูลที่ต้องการลบ
var Id = $(obj).parents("tr").index();
// กำหนดตำแหน่งข้อมูลใน array ที่ต้องการลบ
var IdDel=Id-1;
// ดึงข้อมูลมาเก็บในตัวแปร array
var showDatas = JSON.parse("[" + localStorage.dataWeb + "]");
// หาจำนวนแถวของข้อมูลทั้งหมด
var lengthData=showDatas.length;
// กำหนดตัวแปร สำหรับเก็บข้อมูลใหม่ หลังจากลบ เพื่อบันทึกเข้าไปใหม่
var strVal = "";
for(var data in showDatas){
if(data!=IdDel){ // ข้อมูลใหม่ ต้องไม่มีข้อมูลที่จะลบ
strVal+=JSON.stringify(showDatas[data]);
strVal += ",";
}
}
var last_strVal=strVal.substring(0,strVal.length-1);
// ลบแถวของรายการที่เลือกลบ
$(obj).parents("tr").remove();
// ถ้าข้อมูลใหม่ ไม่เป็นค่าว่าง
if(last_strVal!=""){
// บันทึกข้อมูลใหม่ หลังจากลบรายการแล้ว
localStorage.dataWeb=last_strVal;
}else{
// ถ้าลบรายการจนหม่ด ค่าที่จะบันทึก ให้กำหนดค่าเป็นค่าว่าง
localStorage.dataWeb="";
}
};
function hasStorage() {
return typeof (Storage) !== "undefined" ? true : false;
}
