[Shoper Gamer] LocalStorage คืออะไร โดย

สำรวจ
ลงทุน
คำถาม

มีบัญชีอยู่แล้ว?หรือ

Shoper Gamer

•

15 ก.ย. เวลา 07:16 • การศึกษา

Website By Shoper Gamer

LocalStorage คืออะไร

โดย

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

ความมหัศจรรย์เหล่านี้เกิดขึ้นได้ด้วยเทคโนโลยีที่เรียกว่า LocalStorage นั่นเองครับ

LocalStorage คือฟีเจอร์หนึ่งของเว็บแอปพลิเคชันที่ช่วยให้เว็บไซต์สามารถเก็บข้อมูลบางอย่างไว้ในเครื่องคอมพิวเตอร์หรือมือถือของผู้ใช้ได้อย่างถาวร โดยไม่ต้องส่งข้อมูลไปเก็บที่เซิร์ฟเวอร์ เกิดจากความจำเป็นที่ต้องการเก็บข้อมูลมากกว่าคุกกี้ (Cookie) ซึ่งมีขนาดจำกัดเพียง 4KB และถูกส่งไปทุกครั้งที่เรียกหน้าเว็บ ทำให้เปลือง Bandwidth

★
LocalStorage คืออะไร?

LocalStorage คือส่วนหนึ่งของ Web Storage API ที่ถูกพัฒนาขึ้นมาเพื่อแก้ปัญหาข้อจำกัดของคุกกี้ โดยมีคุณสมบัติเด่นดังนี้ครับ

📦 เก็บข้อมูลได้มากกว่า: โดยทั่วไปมีความจุประมาณ 5-10 MB ต่อโดเมน ซึ่งมากกว่าคุกกี้ที่มีเพียง 4KB อย่างมาก

🗃️ ข้อมูลอยู่ได้ตลอดไป: ไม่มีวันหมดอายุ ข้อมูลจะอยู่จนกว่าผู้ใช้จะลบออกด้วยตัวเอง หรือเรียกใช้คำสั่ง clear() ผ่านโค้ด

⚡ ไม่ถูกส่งไปกับทุกคำขอ: ข้อมูลจะถูกเก็บไว้ที่ฝั่ง Client เท่านั้น ไม่ได้ถูกส่งไปยัง Server ทุกครั้ง ช่วยเพิ่มประสิทธิภาพในการโหลดหน้าเว็บ

💡 สรุปสั้นๆ: LocalStorage คือระบบจัดเก็บข้อมูลแบบคีย์-ค่าบนเบราว์เซอร์ ที่ช่วยให้เว็บไซต์เก็บข้อมูลสำคัญได้แบบถาวร จนกว่าผู้ใช้จะลบออกเอง

★
LocalStorage ทำงานอย่างไร?

การทำงานของ LocalStorage มีหลักการสำคัญดังนี้ครับ

⚪ เก็บข้อมูลแบบ Key-Value: LocalStorage เก็บข้อมูลเป็นคู่ของ ชื่อ (Key) และ ค่า (Value) ซึ่งทั้งสองอย่างต้องเป็นข้อความ (String) หากต้องการเก็บข้อมูลที่เป็น Object หรือ Array จะต้องแปลงเป็น JSON ก่อนแล้วค่อยนำมาเก็บ

⚪ แยกตามโดเมน (Same-Origin Policy): ข้อมูลที่เว็บไซต์ example.com เก็บไว้ จะไม่สามารถถูกอ่านโดย another-site.com ได้ ทำให้ข้อมูลปลอดภัยจากการเข้าถึงข้ามเว็บไซต์

⚪ การทำงานแบบซิงโครนัส (Synchronous): คำสั่งที่ใช้กับ LocalStorage จะทำงานแบบทันทีและบล็อคการทำงานอื่นระหว่างที่กำลังอ่านหรือเขียนข้อมูล ซึ่งอาจส่งผลต่อประสิทธิภาพหากมีการจัดการข้อมูลปริมาณมาก

⚪ ทำงานร่วมกับ SessionStorage: LocalStorage มีน้องสาวชื่อ sessionStorage ที่ทำงานคล้ายกัน แต่ข้อมูลใน sessionStorage จะอยู่ได้แค่ในแท็บ (Tab) นั้นๆ และจะถูกลบเมื่อปิดแท็บหรือเบราว์เซอร์เท่านั้น

★
ประโยชน์ของ LocalStorage

หากพิจารณาจากวิธีการใช้งานและวัตถุประสงค์หลักในปัจจุบัน LocalStorage สามารถแบ่งตามหน้าที่การใช้งานในเว็บแอปพลิเคชันได้ดังนี้ครับ

⚪ สำหรับเก็บการตั้งค่าผู้ใช้ (User Preferences): ใช้เก็บข้อมูลที่ไม่สำคัญมาก เช่น การเลือกธีมสี (โหมดกลางวัน/กลางคืน), ขนาดตัวอักษร หรือภาษาที่เลือกใช้ เพื่อให้ผู้ใช้ได้รับประสบการณ์แบบเดิมทุกครั้งที่กลับมาเยี่ยมชม

⚪ สำหรับแคชข้อมูล (Cache): ใช้เก็บข้อมูลที่อาจมีการโหลดบ่อยเพื่อลดการโหลดซ้ำ เช่น การเก็บข้อมูลที่ได้จาก API ไว้ เพื่อให้หน้าเว็บทำงานเร็วขึ้น (แต่ไม่ควรเก็บข้อมูลที่มีความอ่อนไหวสูง)

⚪ สำหรับจัดการสถานะชั่วคราว (State Management): เช่น การเก็บข้อความที่กำลังพิมพ์ในฟอร์ม, การเก็บข้อมูลสินค้าในตะกร้าสำหรับผู้ที่ยังไม่ได้ล็อกอิน หรือการบันทึกความคืบหน้าในเกม

★
ประโยชน์ของ LocalStorage

✅ ใช้งานง่ายมาก: มี API ที่เรียบง่าย เพียงใช้คำสั่ง setItem(), getItem(), removeItem() ก็สามารถจัดการข้อมูลได้ทันที

✅ ไม่ต้องพึ่งพาเซิร์ฟเวอร์: ช่วยลดภาระและค่าใช้จ่ายของเซิร์ฟเวอร์ เนื่องจากข้อมูลทั้งหมดถูกประมวลผลและเก็บไว้ที่ฝั่งผู้ใช้

✅ ความเร็วสูง: การอ่านและเขียนข้อมูลทำได้รวดเร็ว เพราะเป็นการทำงานภายในเครื่อง ไม่ต้องผ่านระบบเครือข่าย

✅ มีความปลอดภัยในระดับหนึ่ง: ทำงานภายใต้กฎ Same-Origin Policy ทำให้เว็บไซต์อื่นไม่สามารถเข้ามาขโมยข้อมูลได้

★
ควรมีความรู้พื้นฐานอะไรบ้าง?

เพื่อเริ่มต้นใช้งาน LocalStorage อย่างถูกต้อง ควรมีความรู้พื้นฐานดังนี้ครับ

⚪ JavaScript พื้นฐาน: จำเป็นอย่างยิ่งในการเขียนโค้ดเพื่อเรียกใช้ API ของ LocalStorage

⚪ เข้าใจการใช้ JSON: เนื่องจากข้อมูลที่เป็น Object หรือ Array ต้องแปลงเป็น JSON ก่อนเสมอ (ผ่าน JSON.stringify() และ JSON.parse())

⚪ ความรู้เรื่องความปลอดภัยพื้นฐาน: ควรตระหนักถึงความเสี่ยงจาก XSS (Cross-Site Scripting) เพราะหากมีช่องโหว่ ผู้โจมตีอาจขโมยข้อมูลใน LocalStorage ได้

★
LocalStorage VS Cookie ต่างกันยังไง?

การเปรียบเทียบความแตกต่างระหว่าง LocalStorage และ Cookie ในแต่ละมิติ มีรายละเอียดดังนี้ครับ

📦 ความจุข้อมูล: LocalStorage มีความจุประมาณ 5-10 MB ต่อโดเมน ส่วน Cookie จำกัดไว้เพียง 4 KB ต่อโดเมนเท่านั้น

🖥️ การส่งข้อมูลไปยัง Server: LocalStorage จะ ไม่ส่ง ข้อมูลไปหา Server โดยข้อมูลจะอยู่ที่ Client เท่านั้น ในขณะที่ Cookie จะถูก ส่งไปทุกครั้ง ที่มีการเรียกหน้าเว็บ ทำให้เปลือง Bandwidth

⏳ อายุการเก็บข้อมูล: LocalStorage เก็บข้อมูลแบบถาวรจนกว่าจะลบด้วยตัวเอง ส่วน Cookie สามารถกำหนดวันหมดอายุได้ (หากไม่กำหนดจะเป็น Session Cookie)

🔑 การเข้าถึงจาก JavaScript: LocalStorage สามารถเข้าถึงได้โดยตรงผ่าน API สำเร็จรูป ส่วน Cookie เข้าถึงและจัดการได้ยุ่งยากกว่า (ต้อง Parse String เอง)

🔒 HTTP Only Flag: LocalStorage ไม่มีฟีเจอร์นี้ ส่วน Cookie รองรับการตั้งค่า HTTP Only เพื่อป้องกันไม่ให้ JavaScript เข้าถึง ช่วยเพิ่มความปลอดภัย

🗃️ ประเภทข้อมูลที่เก็บได้: LocalStorage รองรับการเก็บข้อความ String และการแปลง JSON Object ส่วน Cookie เก็บได้เฉพาะ String แบบธรรมดา

🧑‍💻 รูปแบบการทำงาน: ทั้ง LocalStorage และ Cookie ทำงานแบบ Synchronous เช่นเดียวกัน

🛡️ ความปลอดภัย: LocalStorage มีความเสี่ยงต่อการถูกโจมตีแบบ XSS ส่วน Cookie เสี่ยงต่อทั้ง XSS และ CSRF

★
ตัวอย่างการใช้งาน LocalStorage

⚪ จดจำโหมดกลางคืน (Dark Mode): เมื่อผู้ใช้กดปุ่มเปลี่ยนธีม ให้บันทึกค่าการตั้งค่าไว้ใน LocalStorage และเมื่อโหลดหน้าเว็บครั้งถัดไปให้อ่านค่านั้นมาใช้

⚪ บันทึกข้อมูลฟอร์ม: ในกรณีที่ผู้ใช้กำลังกรอกแบบฟอร์มยาวๆ การบันทึกข้อมูลที่กรอกไปแล้วลง LocalStorage ทุกๆ ไม่กี่วินาทีจะช่วยให้ข้อมูลไม่หายไปหากเบราว์เซอร์ปิดกะทันหัน

⚪ เก็บตะกร้าสินค้า: สำหรับผู้ใช้ที่ยังไม่ได้ล็อกอิน การเก็บข้อมูลสินค้าที่เพิ่มในตะกร้าไว้ใน LocalStorage จะช่วยให้เมื่อรีเฟรชหน้าเว็บ ตะกร้าก็ไม่ว่างเปล่า

⚪ การตั้งค่าส่วนตัวอื่นๆ: เช่น ขนาดตัวอักษร, รูปแบบการแสดงผลข้อมูล ฯลฯ