PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

เทคนิคใช้งาน localStorage แบบฐานข้อมูล อย่างง่าย

03 September 2014 By


ตัวอย่างและโค้ดต่อไปนี้ เป็นการประยุกต์การใช้งานน localStorage แบบฐานข้อมูล
โดยในตัวอย่าง สามารถที่จะเพิ่มและลบข้อมูลได้ แต่ไม่ได้เพิ่มเติมในส่วนของ
การสามารถแก้ไขข้อมูล เนื่องจากข้อจำกัดของประเภทข้อมูล ที่เป็นรูปแบบ string
 
การประยุกต์ใช้งานในครั้งนี้ เป็นแนวทางสำหรับนำไปใช้ใน mobile app ได้
ในตัวอย่าง จะเป็นการใช้งานร่วมกับ jquery และ css bootstrap
 
 
ตัวอย่าง
 

บันทึกข้อมูลฟอร์มลงใน localStorage

Name :
Tel :
Address :

# 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;
}
 

Tags:: html5 localstorage ฐานข้อมูล

เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน และลงชื่อติดตาม


สมัครสมาชิกได้ที่        ล็อกอินได้ที่   





URL สำหรับอ้างอิง