วิธีที่เบราว์เซอร์จัดเก็บข้อมูล

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

คุณควรทราบถึง 3 วิธีหลักที่เบราว์เซอร์ใช้ในการจัดเก็บข้อมูล:

• Cookies • Browser Cache • Web Storage

Cookies

Cookies คือไฟล์ข้อความขนาดเล็ก เว็บไซต์ต่างๆ ใช้สิ่งนี้เพื่อจดจำคุณ โดยจะจัดเก็บข้อมูลเซสชันการเข้าสู่ระบบ (login sessions) และการตั้งค่าภาษาของคุณ

หลักการทำงาน:

  • คุณเข้าชมเว็บไซต์
  • เว็บไซต์ส่ง cookie ไปยังเบราว์เซอร์ของคุณ
  • เบราว์เซอร์ของคุณบันทึกข้อมูลนั้นไว้
  • เมื่อคุณเข้าชมครั้งต่อไป เบราว์เซอร์ของคุณจะส่ง cookie นั้นกลับไปยังเซิร์ฟเวอร์

ข้อควรจำ:

  • Cookies มีข้อจำกัดขนาดที่เล็กมากเพียง 4KB
  • ข้อมูลจะถูกส่งไปพร้อมกับทุกคำขอ (request) ซึ่งอาจทำให้การทำงานช้าลงได้
  • ห้ามเก็บรหัสผ่านไว้ใน cookies โดยเด็ดขาด

Browser Cache

Cache ใช้สำหรับจัดเก็บไฟล์ที่มีขนาดใหญ่ เช่น รูปภาพ, CSS และ JavaScript โดยมีเป้าหมายหลักคือความเร็ว

หลักการทำงาน:

  • คุณเข้าชมเว็บไซต์เป็นครั้งแรก
  • เบราว์เซอร์ของคุณจะดาวน์โหลดไฟล์ทั้งหมดและบันทึกไว้ใน cache
  • เมื่อคุณเข้าชมครั้งต่อไป เบราว์เซอร์จะโหลดไฟล์จากอุปกรณ์ของคุณแทนที่จะโหลดจากอินเทอร์เน็ต

ข้อดี:

  • หน้าเว็บโหลดได้เร็วขึ้นมาก
  • ใช้แบนด์วิดท์อินเทอร์เน็ตน้อยลง
  • ช่วยลดภาระการทำงานของเซิร์ฟเวอร์

Web Storage

นี่คือฟีเจอร์ของ HTML5 ที่ช่วยให้เว็บไซต์สามารถจัดเก็บข้อมูลในรูปแบบคู่คีย์และค่า (key-value pairs) ซึ่งมีประสิทธิภาพมากกว่า cookies เพราะข้อมูลจะไม่ถูกส่งไปยังเซิร์ฟเวอร์พร้อมกับทุกคำขอ

มี 2 ประเภท ได้แก่:

  • Local Storage: ข้อมูลจะยังคงอยู่แม้คุณจะปิดเบราว์เซอร์ไปแล้ว โดยสามารถเก็บข้อมูลได้ประมาณ 5MB ถึง 10MB
  • Session Storage: ข้อมูลจะหายไปเมื่อคุณปิดแท็บนั้นๆ

กรณีการใช้งาน:

  • Local storage เหมาะมากสำหรับการตั้งค่า Dark Mode
  • Session storage เหมาะสำหรับการเก็บข้อมูลในฟอร์มแบบชั่วคราว

สรุป

  • ใช้ Cookies สำหรับเซสชันการเข้าสู่ระบบและการสื่อสารกับเซิร์ฟเวอร์
  • ใช้ Cache เพื่อเพิ่มความเร็วในการโหลดเว็บไซต์ด้วย Static Assets
  • ใช้ Web Storage สำหรับข้อมูลฝั่งไคลเอนต์ (client-side) ที่มีปริมาณมากขึ้น

Source: https://dev.to/dailycodetools/how-browser-stores-data-cookies-cache-storage-25-jun-0346-m7h