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

 

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

 

 1150
ผู้เข้าชม

บทความที่เกี่ยวข้อง

แนวโน้มการเปลี่ยนแปลงที่ปรับเปลี่ยนไปตามยุคสมัยนิยม มันก็คล้าย ๆ เทรนด์เสื้อผ้าที่มีการเปลี่ยนเเปลงตลอดเวลา แต่จุดเด่นและความเเตกต่างที่เกิดที่ขึ้นในส่วนของความคิดสร้างสรรค์และการออกแบบเว็บจะไม่เหมือนกัน เพียงไม่กี่ปี Web Design ก็กระโดดก้าวข้ามอย่างรวดเร็ว และแทรกซึมเข้าในทุก ๆ องค์กร จึงทำให้เกิดธุรกิจต่าง ๆ มากมาย
233 ผู้เข้าชม
นอกจากตกแต่งรูปบนเว็บของคุณให้ดูสวยงาม ในบางครั้งอาจจะต้องมีคำอธิบายรูปภาพ ซึ่ง Hover Image ถือว่าเป็นเทคนิคที่ช่วยทำให้คำอธิบาย หรือชื่อรูปภาพนั้น มีความสวยงาม น่าสนใจขึ้นมาก วันนี้เรามานำเสนอ CSS Hover Image สวยๆ ให้คุณนำไปใช้งานได้แบบง่ายๆ
351 ผู้เข้าชม
เขียนบทความอย่างไรให้น่าอ่าน ข้อความติดตา ตรึงใจผู้อ่านและสามารถนำไปบอกต่อผู้อ่านได้ หลายคนไม่ค่อยชอบอ่านตัวหนังสือมากนัก เราจะเห็นว่าเว็บไซต์ส่วนใหญ่เลือกที่จะใช้รูปภาพในการสื่อสารกับผู้อ่าน
964 ผู้เข้าชม
สร้างเว็บไซต์สำเร็จรูปฟรี ร้านค้าออนไลน์