การใช้งาน Web Storage Objects ใน HTML5 อย่างง่าย

เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdee
html5 storage sessionstorage localstorage

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ html5 storage sessionstorage localstorage

ดูแล้ว 12,618 ครั้ง


ตามจริง เรื่อง 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 : Name
sessionStorage : Tel
            Reset

  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 
}


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ