ฟังก์ชั่น localStorage ใน JavaScript ของดีที่ช่วยงานได้เยอะ

 

Web Storage คือการเก็บข้อมูลไว้ฝั่ง Client หรือเก็บที่เบราว์เซอร์ของแต่ละเครื่องเอง ซึ่งเมื่อก่อนเรานิยมเก็บไว้ใน Cookie นั่นเอง แต่สำหรับ Web Storage นั้นมีดีกว่าอีกเพราะสามารถเก็บข้อมูลได้มากขึ้น และไม่ต้องส่ง HTTP Header ไปยัง Server ทำให้สามารถทำงานได้อย่างรวดเร็ว

 

วิธีใช้งาน Web Storage สามารถทำได้ 2 วิธีดังนี้

1. localStorage คือการเก็บข้อมูลไว้ที่ฝั่ง Client โดยที่ข้อมูลจะไม่สูญหายเมื่อปิดเบราว์เซอร์ หรือ Refresh หน้าเว็บ แต่จะหมดอายุตามกำหนดเวลา

2. Session Storage คือการเก็บข้อมูลอีกแบบที่ฝั่ง Client เหมือนกัน แต่เมื่อเราปิดเว็บข้อมูลก็จะหายทันที

 

ก่อนอื่นมาดู Web Browser ที่รองรับฟังก์ชั่นนี้กันก่อน

 สามารถตามไปดูอัพเดทกันได้ที่นี่ CLICK

 

การใช้งานฟังก์ชั่น localStorage

การกำหนดค่า หรือเก็บข้อมูลไว้ใน localStorage

localStorage.setItem(key, value)

การเรียกข้อมูลที่เก็บไว้มาใช้งาน

localStorage.getItem(key)

การลบข้อมูลที่ได้เก็บไว้

localStorage.removeItem(key)

การลบข้อมูลทั้งหมดที่เก็บไว้ในโดเมน

localStorage.clear()

เพื่อความเข้าใจได้ดียิ่งขึ้นต้องลองลงมือ โดยสามารถเข้าไปลองดูการทำงานของฟังก์ชั่น localStorage กันได้ที่นี่ CLICK

 

สำหรับใครที่ต้องการศึกษาแบบเจาะลึกกว่านี้ก็ตามไปที่นี่เลย CLICK