จัดเก็บในท้องถิ่น HTML, ดีกว่า cookies
HTML เก็บข้อมูลท้องถิ่นคืออะไร?
มีการจัดเก็บในท้องถิ่น, การใช้งานเว็บสามารถจัดเก็บข้อมูลในประเทศที่อยู่ในเบราว์เซอร์ของผู้ใช้
ก่อน HTML5, ข้อมูลใบสมัครจะต้องมีการเก็บไว้ใน cookies รวมในคำขอทุกเซิร์ฟเวอร์ จัดเก็บในท้องถิ่นมีความปลอดภัยมากขึ้นและจำนวนมากของข้อมูลที่สามารถเก็บไว้ในเครื่องโดยไม่มีผลต่อประสิทธิภาพของเว็บไซต์
ซึ่งแตกต่างจาก cookies จำกัด การจัดเก็บข้อมูลที่มีขนาดใหญ่ (at least 5MB) และข้อมูลจะไม่ถูกโอนไปยังเซิร์ฟเวอร์
จัดเก็บในท้องถิ่นเป็นต่อแหล่งกำเนิด (per domain and protocol) หน้าทั้งหมดจากที่หนึ่งต้นกำเนิดสามารถจัดเก็บและเข้าถึงข้อมูลเดียวกัน
การจัดเก็บข้อมูลในท้องถิ่นและเซสชั่น
เก็บข้อมูลบนเว็บมีที่เก็บสองพื้นที่ท้องถิ่นที่แตกต่างกันการจัดเก็บและเซสชั่นการจัดเก็บข้อมูลที่แตกต่างกันในขอบเขตและอายุการใช้งาน
ข้อมูลที่วางไว้ในห้องเก็บของท้องถิ่นต่อต้นกำเนิด (การรวมกันของโปรโตคอลชื่อโฮสต์และหมายเลขพอร์ตที่กำหนดไว้ในนโยบายเดียวกันแหล่งกำเนิด) (ข้อมูลที่สามารถใช้ได้กับสคริปต์ทั้งหมดที่โหลดจากหน้าจากต้นกำเนิดเดียวกันที่ข้อมูลที่เก็บไว้ก่อนหน้านี้) และ เบราว์เซอร์ยังคงอยู่หลังจากถูกปิด
การเก็บรักษาเซสชั่นเป็นต่อแหล่งที่มาต่อหน้าต่างหรือแท็บและจะถูก จำกัด อายุการใช้งานของหน้าต่าง การเก็บรักษาเซสชั่นมีวัตถุประสงค์เพื่อให้แยกกรณีของแอพลิเคชันเว็บเดียวที่จะทำงานในหน้าต่างที่แตกต่างกันโดยไม่รบกวนอื่น ๆ กรณีการใช้งานในแต่ละที่ไม่ได้รับการสนับสนุนอย่างดีจากคุกกี้
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่รองรับการจัดเก็บข้อมูลในพื้นที่
| API | |||||
|---|---|---|---|---|---|
| Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
วัตถุ HTML เก็บข้อมูลท้องถิ่น
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"
- เรียกค่าของ "lastname" และใส่ลงในองค์ประกอบที่มี id = "ผล"
ตัวอย่างข้างต้นอาจจะมีการเขียนเช่นนี้
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
ไวยากรณ์สำหรับการลบ "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."; ลองตัวเอง»