HTML Web Storage API
ที่เก็บข้อมูลเว็บ HTML; ดีกว่าคุกกี้
HTML Web Storage คืออะไร?
ด้วยพื้นที่จัดเก็บบนเว็บ เว็บแอปพลิเคชันสามารถจัดเก็บข้อมูลภายในเบราว์เซอร์ของผู้ใช้ได้
ก่อน HTML5 ข้อมูลแอปพลิเคชันจะต้องเก็บไว้ในคุกกี้ ซึ่งรวมอยู่ในทุกคำขอของเซิร์ฟเวอร์ พื้นที่จัดเก็บเว็บมีความปลอดภัยมากขึ้น และสามารถจัดเก็บข้อมูลจำนวนมากในเครื่องได้ โดยไม่กระทบต่อประสิทธิภาพของเว็บไซต์
ขีด จำกัด ของพื้นที่เก็บข้อมูลนั้นแตกต่างจากคุกกี้มาก (อย่างน้อย 5MB) และข้อมูลจะไม่ถูกถ่ายโอนไปยังเซิร์ฟเวอร์
พื้นที่จัดเก็บเว็บต่อต้นทาง (ต่อโดเมนและโปรโตคอล) ทุกหน้าจากต้นทางเดียวสามารถจัดเก็บและเข้าถึงข้อมูลเดียวกันได้
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุน Web Storage อย่างสมบูรณ์
| API | |||||
|---|---|---|---|---|---|
| Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
HTML Web Storage Objects
ที่จัดเก็บเว็บ HTML จัดเตรียมสองอ็อบเจ็กต์สำหรับจัดเก็บข้อมูลบนไคลเอนต์:
window.localStorage- เก็บข้อมูลไม่มีวันหมดอายุwindow.sessionStorage- เก็บข้อมูลสำหรับหนึ่งเซสชัน (ข้อมูลจะหายไปเมื่อปิดแท็บเบราว์เซอร์)
ก่อนใช้ที่เก็บข้อมูลบนเว็บ ให้ตรวจสอบการรองรับเบราว์เซอร์สำหรับ localStorage และ sessionStorage:
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
}
else {
// Sorry! No Web Storage support..
}
วัตถุ localStorage
ออบเจ็กต์ localStorage เก็บข้อมูลโดยไม่มีวันหมดอายุ ข้อมูลจะไม่ถูกลบเมื่อปิดเบราว์เซอร์ และจะพร้อมใช้งานในวัน สัปดาห์ หรือปีถัดไป
ตัวอย่าง
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
ตัวอย่างอธิบาย:
- สร้างคู่ชื่อ/ค่า localStorage ด้วย name="lastname" และ value="Smith"
- ดึงค่าของ "นามสกุล" และใส่ลงในองค์ประกอบด้วย id="result"
ตัวอย่างข้างต้นสามารถเขียนได้ดังนี้:
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
ไวยากรณ์สำหรับการลบรายการ "นามสกุล" localStorage มีดังนี้:
localStorage.removeItem("lastname");
หมายเหตุ:คู่ชื่อ/ค่าจะถูกเก็บไว้เป็นสตริงเสมอ อย่าลืมแปลงเป็นรูปแบบอื่นเมื่อจำเป็น!
ตัวอย่างต่อไปนี้นับจำนวนครั้งที่ผู้ใช้คลิกปุ่ม ในรหัสนี้ สตริงค่าจะถูกแปลงเป็นตัวเลขเพื่อเพิ่มตัวนับ:
ตัวอย่าง
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s).";
วัตถุ sessionStorage
วัตถุsessionStorageมีค่าเท่ากับวัตถุ localStorage ยกเว้น
ว่าจะเก็บข้อมูลไว้สำหรับเซสชันเดียวเท่านั้น ข้อมูลจะถูกลบออกเมื่อผู้ใช้ปิดแท็บเบราว์เซอร์เฉพาะ
ตัวอย่างต่อไปนี้นับจำนวนครั้งที่ผู้ใช้คลิกปุ่มในเซสชันปัจจุบัน:
ตัวอย่าง
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
}
else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";