ล้วงลึก Local storage คืออะไร ทำไมดีกว่า Cookie

หลายคนอาจจะต้องมีการเขียนหน้าเว็บเก็บข้อมูลบางส่วนไว้ที่ฝั่ง ผู้ใช้งาน (Cilent) วันนี้เราจะมาแนะนำให้รู้จัก Local Storage กันครับ

Local Storage ถ้าอธิบายง่ายๆคงเปรียบเทียบได้กับ Cookie ของบราวเซอร์ครับ แต่มันทำงานได้มีประสิทธิภาพสูงกว่ากันมาก จริงๆแล้ว Local Storage  เป็นส่วนย่อยๆของ HTML5 Web Storage เท่านั้นเองครับ

HTML5 Web Storage

แบ่งได้สองส่วนย่อยๆคือ

1. localStorage

ข้อมูลที่จะเก็บไว้ในเครื่องผู้ใช้ตลอดกาล ไม่มีวันหายไปไหน ยกเว้นบราวเซอร์ของเขาพังหละครับ 555

2. sessionStorage

ข้อมูลที่จะหายไป เมื่อหน้าต่างนั้น หรือ windows นั้นถูกปิดไป

แล้วที่ว่ามันเร็วกว่า ดีกว่า Cookie ยังไง ?

การใช้ Cookie ในแต่ละ Request ของเว็บไซต์นั้น จะถูกส่งไปด้วย และถูกจำกัดที่ 4KB ซึ่งต่างกับ Web Storage อย่างมากเพราะไม่ส่งไปใน Request และจำกัดให้สูงสุดถึง 5MB ต่อโดเมนเนม

วิธีการใช้งานทำยังไง

เริ่มต้นง่ายๆเราเช็คก่อนครับ ว่าหน้าเว็บไซต์เราพร้อมใช้งาน Local Storage หรือไม่

if(typeof(Storage) !== "undefined") {    
     alert("Web storage support");
} else {    
     alert("No web storage support");
}

ด้วยคำสั่งนี้ จะทำให้รู้ว่า บราวเซอร์ที่เราใช้งานอยู่ ซัพพอรต์หรือไม่

จากนั้นลองด้วยโค๊ด  Local Storage ง่ายๆกันครับ

if(typeof(Storage) !== "undefined") {
    if (localStorage.counterrefresh) {  
          localStorage.counterrefresh = Number(localStorage.counterrefresh) + 1;    
    } else {       
          localStorage.counterrefresh = 1;      
    }    
    alert(localStorage.counterrefresh);
} else { 
    alert("No web storage support");
}

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

if(typeof(Storage) !== "undefined") {    
    alert("Web storage support");
} else {    
    alert("No web storage support");
}

ด้วยคำสั่งนี้ จะทำให้รู้ว่า บราวเซอร์ที่เราใช้งานอยู่ ซัพพอรต์หรือไม่

จากนั้นลองด้วยโค๊ด  Local Storage ง่ายๆกันครับ

if(typeof(Storage) !== "undefined") {
    if (sessionStorage.counterrefresh) {        
        sessionStorage.counterrefresh = Number(localStorage.counterrefresh) + 1;    
    } else {        
        sessionStorage. counterrefresh = 1;    
    }
    alert(sessionStorage.counterrefresh);
} else { 
    alert("No web storage support");
}

อันนี้เป็นของ SessionStorage เรารีเฟรชไปก็เพิ่มขึ้นทีละ 1 เหมือนกันครับ แต่ถ้าเราลองปิดแล้วปิดใหม่ มันจะเริ่มที่ 1 เสมอครับ

เกือบลืมบอกไป  Web Storage Support Browser อะไรบ้าง?

บราวเซอร์ใหม่ๆ สามารถลองรับได้หมดแล้วครับ หรือกล่าวได้ว่า IE8+, Firefox 3.5+,Chrome 4+, iOs 2.0+, Android 2.0+

 

บทความนี้หวังว่าคงเป็นประโยชน์กับเพื่อนๆและนำไปปรับใช้ ประยุกต์กันนะครับ สวัสดีครับ 🙂