HTML จัดเก็บข้อมูลท้องถิ่น

HTML จัดเก็บข้อมูลท้องถิ่น：ดีกว่า cookies

อะไรคือ HTML จัดเก็บข้อมูลท้องถิ่น?

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

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

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

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

การสนับสนุนเว็บเบราส์

ตารางในแถวที่ระบุว่าเว็บเบราส์อุปกรณ์ที่สนับสนุนการบันทึกท้องถิ่นทั้งหมด

API
Web Storage 4.0 8.0 3.5 4.0 11.5

ตัวแปร HTML การบันทึกท้องถิ่น

HTML การบันทึกท้องถิ่นให้สำหรับสองตัวแปรที่ใช้บันทึกข้อมูลในคลาสแบบละคร (client-side)

  • 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");

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

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

ตัวอย่าง

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "คุณได้คลิกแบตทันนี้ " +
localStorage.clickcount + " ครั้ง.";

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

sessionStorage ให้ความเหมือนกับ localStorage

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

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

ตัวอย่าง

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "ใน session นี้ คุณได้คลิกแบตทันนี้ " +
sessionStorage.clickcount + " ครั้ง.";

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