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

รู้จักกับ 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

 

โดย :
 2938
ผู้เข้าชม

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

การจ้างบริษัททำเว็บไซต์ธุรกิจ ในยุคที่มีการแข่งขันทางออนไลน์สูง จะเป็นการตอบโจทย์มากกว่าที่สุดสำหรับนักธุรกิจที่ต้องการมีตัวตนในโลกออนไลน์
การออกแบบ เป็นเรื่องของอารมณ์ความรู้สึก โดยนักออกแบบจะต้องคำนึงถึงความต้องการของผู้ใช้งาน และวัตถุประสงค์การใช้งานเว็บไซด์

Feature SoGoodWeb

SoGoodWeb มีระบบรับชำระเงินแบบใหม่ผ่าน Pay Solution รองรับทุกธนาคารชั้นนำ ทำให้การจ่ายเงินผ่านช่องทางออนไลน์เป็นเรื่องง่าย ช่วยให้ลูกค้าจ่ายเงินออนไลน์ได้อย่างสะดวก
LINE Notify คือ บริการที่คุณสามารถได้รับข้อความแจ้งเตือนจากเว็บเซอร์วิสต่างๆ ที่คุณสนใจได้ทาง LINE โดยหลังเสร็จสิ้นการเชื่อมต่อกับทางเว็บเซอร์วิสแล้ว คุณจะได้รับการแจ้งเตือนจากบัญชีทางการของ “LINE Notify” ซึ่งให้บริการโดย LINE นั่นเอง
เหมาะสำหรับลูกค้าที่เปิดธุรกิจทัวร์ - ทัวร์ท่องเที่ยว ทั้งที่เป็นเจ้าของเอง หรือเป็นรายย่อย เป็นระบบจองทัวร์ ที่ช่วยทำให้การจัดการธุรกิจทัวร์ - ทัวร์ท่องเที่ยว ให้เป็นเรื่องง่าย
สร้างเว็บไซต์สำเร็จรูปฟรี ร้านค้าออนไลน์