ตามจริง เรื่อง web storage หลายที่มีการใช้งานนานแล้ว แต่ที่นี่เพิ่งมาเขียน
เนื้อหา ยังไงก็สร้างหมวด html5 มาแล้ว เพิ่มซักบทความคงไม่เป็นไร
web storage ไม่เคยใช้มาก่อน (ก่อนเริ่มบทความนี้) แต่พอไปไล่อ่านตามเว็บต่างๆ
ก็พอจะเข้าใจ และมองว่าใช้งานง่ายมาก ง่ายกว่า cookie เสียอีก บราวเซอร์ส่วนใหญ่ก็รองรับแล้ว
ก็หวังว่าจะมีปรโยชน์ และนำมาใช้ได้บ่อยๆ
Web Storage จะมี object ให้มาใช้งาน 2 ตัวคือ
localStorage กับ sessionStorage (อย่าลืมว่า ตัวเล็กตัวใหญ่ค่าต่างกัน ระวังพิมพ์ผิด)
localStorage เก็บข้อมูลไว้ตลอด ไม่มีหมดอายุ
sessionStorage เก็บข้อมูลชั่วคราว ปิดหน้าต่างเพจ หรือ แท็บ ข้อมูลจะหายไป
ทั้ง localStorage และ sessionStorage จะมีคำสั่งในการใช้งานเหมือนกัน
การกำหนดค่า
จะกำหนดในรูปแบบ name / value เช่น website="ninenik.com"
ใช้คำสั่ง เขียนได้สองแบบ
localStorage.website="ninenik.com";
sessionStorage.website="ninenik.com";
// หรือ
localStorage.setItem("website","ninenik.com");
sessionStorage.setItem("website","ninenik.com");
การกำหนดค่ากรณี value เป็น object
ให้เข้าใจว่า ปกติค่า value ต้องเป็น string เท่านั้น
ดังนั้นการจะใช้ตัวแปร object มากำหนดเป็น value ต้องทำให้เป็น string ก่อน
โดยใช้คำสั่ง JSON.stringify() เข่น
var user = {
name:"ninenik",
tel:"080808080"
};
localStorage.user=JSON.stringify(user);
การรับค่าข้อมูล
var website_loc=localStorage.website;
var website_ses=sessionStorage.website;
// หรือ
var website_loc=localStorage.getItem("website");
var website_ses=sessionStorage.getItem("website");
การรับค่าข้อมูล string ที่ถูกเปลงค่ามาจาก object
ด้วยคำสั่ง JSON.stringify() ตามอธิบายด้านบน
หากต้องการเปลี่ยนเป็น object สามารถใช้คำสั่ง JSON.parse();
ตัวอย่าง
var user = {
name:"ninenik",
tel:"080808080"
};
localStorage.user=JSON.stringify(user);
var obj_user=JSON.parse(localStorage.user);
การลบข้อมูล ตามชื่อ ที่เก็บค่า
localStorage.removeItem("website");
sessionStorage.removeItem("website");
การลบข้อมูลทั้งหมด
localStorage.clear(); sessionStorage.clear();
หาจำนวนข้อมูลที่เก็บ
localStorage.length; sessionStorage.length;
หาชื่อที่เก็บข้อมูลจาก index key
var name_loc=localStorage.key(index); // index มีค่า 0 ถึง จำนวนข้อมูล - 1 var name_ses=sessionStorage.key(index); // index มีค่า 0 ถึง จำนวนข้อมูล - 1
ตัวอย่าง
localStorage / sessionStorage
| localStorage | sessionStorage | |
|---|---|---|
|
localStorage.name=$("#name").val(); sessionStorage.tel=$("#tel").val(); |
||
|
var name_loc=localStorage.name; var tel_ses=sessionStorage.tel; |
||
|
var nameK_loc=localStorage.key(0); var nameK_ses=sessionStorage.key(0); |
||
|
localStorage.clear(); sessionStorage.clear(); |
||
|
localStorage.length; sessionStorage.lenght; |
เพิ่มเติม ฟังก์ชั่นสำหรับตรวจสอบว่า browser รองรับ web storage หรือไม่
function hasStorage(){
return typeof(Storage)!=="undefined"?true:false;
}
การใช้งาน
if(hasStorage()){
// รองรับ web storage
}
