รู้จักกับ HTML5 Web Storage

การเก็บข้อมูลไว้ที่ฝั่ง Client มันดียังไง ?

    โดยทั่วไปแล้ว เว็บต่างๆ มักจะเก็บข้อมูลเอาไว้ที่ฝั่ง server แต่จริงๆ แล้ว การเก็บข้อมูลเอาไว้ที่ฝั่งclient ก็สามารถทำได้เช่นกันและยังมีข้อดีตรงที่ เข้าถึงข้อมูลได้ด้วย JavaScriptในบางครั้งเราต้องการนำข้อมูลไปใช้ด้วยJavaScriptซึ่งเป็นภาษาฝั่ง client ที่สามารถเข้าถึงข้อมูลที่เก็บเอาไว้ที่ฝั่ง client ได้โดยสะดวกลดภาระของ Server การเก็บข้อมูลไว้ที่ฝั่ง client เหมือนเป็นการกระจายภาระของ server ไปให้ทางฝั่ง client รู้จักกับ HTML5 Web Storageweb storage ใน html5 จะใช้สำหรับจัดเก็บข้อมูลเอาไว้ที่ฝั่ง client เหมือนๆ กับ cookie เลย เพียงแต่มันจะถูกออกแบบมาเพื่อให้ใช้กับภาษาฝั่ง client โดยเฉพาะ ทำให้มันมีข้อได้เปรียบเหนือ cookie ตรงที่เร็วกว่า

    ข้อมูลจาก web storage จะไม่ถูกส่งไปพร้อมกับ HTTP request แต่จะถูกนำมาใช้ก็ต่อเมื่อมีการเรียกใช้เท่านั้นใหญ่กว่าขนาดของ web storage นั้นใหญ่กว่า cookie หลายเท่า (5MB ต่อ 1 โดเมน) การใช้ web storage ยังถูกแบ่งออกเป็น 2 แบบด้วยกัน ได้แก่ localStorage และ sessionStorage ทั้งนี้ก็เพื่อให้เหมาะสมในการใช้งานที่หลากหลาย

วิธีใช้งาน Web Storage ขั้นพื้นฐาน

ทั้ง localStorage และ sessionStorage ต่างก็เป็น object สำหรับจัดเก็บข้อมูล และทั้งคู่ยังมี methods และ property ที่เหมือนกันทุกประการ ดังนี้

• setItem(key, value) เก็บข้อมูล
• getItem(key) ดึงข้อมูลที่เก็บไว้ออกมาใช้ ตาม key ที่ระบุ
• removeItem(key) ลบข้อมูลที่เคยเก็บไว้ ตาม key ที่ระบุ
• key(n) แสดงชื่อของ key ตาม index ที่ระบุ (เริ่มที่ 0)
• clear() ลบข้อมูลที่จัดเก็บไว้ทั้งหมด (เฉพาะโดเมนนั้นๆ)
• length แสดงจำนวนข้อมูลที่จัดเก็บไว้ทั้งหมด (เฉพาะโดเมนนั้นๆ)

ทีนี้เราลองมาดูตัวอย่างการใช้งาน localStorage แบบพื้นฐานกันก่อน

Credit : www.workboxs.com
By : www.SoGoodWeb.com