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

03 September 2014 เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdee

ฐานข้อมูล html5 localstorage

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ฐานข้อมูล html5 localstorage

ตัวอย่างและโค้ดต่อไปนี้ เป็นการประยุกต์การใช้งานน 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;
}

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ