การจัดเก็บสถานที่ท้องถิ่น HTML

การจัดเก็บสถานที่ท้องถิ่น HTML: ดีกว่า cookies

อะไรคือการจัดเก็บสถานที่ท้องถิ่น HTML?

ผ่านการจัดเก็บสถานที่ท้องถิ่น (Local Storage) โปรแกรมเว็บสามารถจัดเก็บข้อมูลท้องถิ่นในบราวเซอร์ผู้ใช้

ก่อน HTML5 ข้อมูลของโปรแกรมสามารถจัดเก็บไว้ใน cookie ได้เพียงเดียว รวมถึงความขอข้อมูลของเซิร์ฟเวอร์ทุกครั้ง การจัดเก็บข้อมูลท้องถิ่นนั้นมีความปลอดภัยมากขึ้น และสามารถจัดเก็บข้อมูลในจำนวนมากไว้ท้องถิ่นโดยไม่ส่งผลกระทบต่อการเรียกใช้งานของเว็บไซต์

ต่างจาก cookie ความจำจำเก็บของเราใหญ่มากขึ้น (อย่างน้อย 5MB) และข้อมูลจะไม่ถูกส่งไปยังเซิร์ฟเวอร์

บันทึกสถานที่เริ่มต้น (origin) ผ่านโดเมนและโปรโตคอล (Local Storage) ทุกหน้าที่มาจากต้นทางสามารถบันทึกและเข้าถึงข้อมูลเดียวกันได้

การสนับสนุนโดยเวอร์ชั่นบราวเซอร์

ตารางในบรรดาค่านำทางตัวแปรที่ใช้สำหรับการสนับสนุน Local Storage ในเวอร์ชั่นเบราวเซอร์แรก

API
Web Storage 4.0 8.0 3.5 4.0 11.5

ตัวแปร HTML จะบันทึก

HTML จะให้สองตัวแปรสำหรับบันทึกข้อมูลที่ลงในลูกของ

  • window.localStorage - บันทึกข้อมูลที่ไม่มีกำหนดวันที่หมดอายุ
  • window.sessionStorage - บันทึกข้อมูลสำหรับ session ซึ่งข้อมูลจะสูญเสียเมื่อปิดแท็บบราวเซอร์

ในการใช้เครื่องบันทึกท้องถิ่น โปรดตรวจสอบการสนับสนุนของบราวเซอร์ localStorage และ sessionStorage:

if (typeof(Storage) !== "undefined") {
    // รหัสสำหรับ localStorage/sessionStorage
} else {
    // ขอโทษ! ไม่สนับสนุน Web Storage ..
}

ตัวแปร localStorage

ตัวแปร localStorage จะเก็บข้อมูลที่ไม่มีกำหนดวันที่หมดอายุ ข้อมูลจะไม่ถูกลบเมื่อหน้าเว็บปิด และจะใช้ได้ทุกวันที่หรืออาทิตย์หรือปี

ตัวอย่าง

// บันทึก
localStorage.setItem("lastname", "Gates");
// คืนค่า
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

ทดลองด้วยตัวเอง

ชุดตัวอย่างที่ชี้แจง

  • สร้างคู่ชื่อ/ค่า localStorage โดย: name="lastname", value="Gates"
  • คืนค่า "lastname" และใส่ในองค์ประกอบที่ id="result"

ข้อเทียบดังกล่าวยังสามารถเขียนเช่นนี้

// บันทึก
localStorage.lastname = "Gates";
// คืนค่า
document.getElementById("result").innerHTML = localStorage.lastname;

การใช้งานภาษาเรียกให้กำจัดโครงการ localStorage โดย "lastname"

localStorage.removeItem("lastname");

หมายเหตุ: ข้อมูลชื่อ/ค่ามักถูกเก็บเป็นสตริง หากต้องการแปลงรูปแบบให้ระวัง!

ตัวอย่างดังกล่าวนี้เพื่อนับจำนวนครั้งที่ผู้ใช้กดปุ่มบวก 1 ต่อหนึ่ง ในรหัสความหมายตัวเลขมีค่าสตริง แล้วนับตั้งแต่นับต้นไปตามลำดับ

ตัวอย่าง

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "คุณได้กดปุ่มนี้ " +
localStorage.clickcount + " ครั้ง.";

ทดลองด้วยตัวเอง

sessionStorage ตัวเดียว

sessionStorage ตัวเดียวกับ localStorage ต่างกันเพียงแค่เรื่องที่มีการเก็บข้อมูลเฉพาะ session เท่านั้น ถ้าผู้ใช้ปิดแทบหน้าเบราวเซอร์ ข้อมูลก็จะถูกลบออกไป

ตัวอย่างด้านล่างนี้นับจำนวนการกดปุ่มโดยผู้ใช้ใน session ปัจจุบัน:

ตัวอย่าง

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "ใน session นี้ คุณได้กดปุ่มนี้ " +
sessionStorage.clickcount + " ครั้ง.";

ทดลองด้วยตัวเอง