LocalStorage Inspector: คู่มือจัดการ Browser Storage ฝั่ง Client สำหรับนักพัฒนาเว็บ

ถ้าคุณเป็นนักพัฒนาเว็บที่ต้อง debug แอปพลิเคชัน ไม่ว่าจะเป็นเว็บ React, Vue, Next.js หรือเว็บไซต์ทั่วไป โอกาสที่คุณจะต้องแตะกับ localStorage นั้นสูงมาก เพราะมันเป็น browser storage พื้นฐานที่เว็บแอปส่วนใหญ่ใช้เก็บ token, user preferences, theme, cart สินค้า หรือข้อมูล cache ต่าง ๆ แต่การเปิด DevTools เพื่อดูค่าใน localStorage ทีละ key นั้นช้าและน่าเบื่อ โดยเฉพาะเมื่อมีข้อมูลเยอะ หรือค่าที่เก็บเป็น JSON ที่อ่านยาก

LocalStorage Inspector คือเครื่องมือฟรีที่ทำงานในเบราว์เซอร์ ช่วยให้คุณดู แก้ไข ค้นหา และจัดการข้อมูล LocalStorage ทั้งหมดของเว็บไซต์ปัจจุบันได้ในหน้าเดียว ผ่าน interface ที่ใช้งานง่าย ตั้งแต่การเห็นภาพรวมจำนวน items และ total size ไปจนถึงการแก้ไขค่า แก้ key ลบข้อมูล export เป็นไฟล์ JSON เพื่อ backup และ import กลับมาได้ทันที

ในบทความนี้เราจะพาคุณไปทำความรู้จักทุกฟีเจอร์ของ LocalStorage Inspector วิธีใช้งานจริงในชีวิตประจำวันของ developer รวมถึงแนวคิดสำคัญเรื่อง same-origin policy และข้อจำกัดของ web storage ที่คุณควรรู้ก่อนจะนำไปใช้กับโปรเจกต์ของตัวเอง

Why Use LocalStorage Inspector?

• เห็นภาพรวมทั้งหมดในหน้าเดียว — เครื่องมือจะโหลด key-value pairs ทั้งหมดของ origin ปัจจุบัน (เว็บไซต์ที่คุณเปิดอยู่) พร้อมแสดงจำนวน items, total size ของข้อมูล และ origin ที่กำลังดู ทำให้รู้สถานะ storage ของเว็บได้ในพริบตา
• ค้นหาได้ทั้ง key และ value — แทนที่จะเลื่อนหาด้วยตา ฟีเจอร์ search จะกรองรายการได้ทั้งจากชื่อ key และเนื้อหาใน value ช่วยประหยัดเวลาเมื่อเว็บมีข้อมูลใน localStorage หลายสิบรายการ
• รู้ทันทีว่าเป็น JSON หรือ plain text — แต่ละ item จะมี preview ที่บอกประเภทของข้อมูล หาก value เป็น JSON ก็จะจัด format ให้อ่านง่าย ไม่ต้องคัดลอกไปวางใน JSON formatter ทุกครั้ง
• แก้ไขข้อมูลได้ทันที ไม่ต้องพึ่ง console — เลือก item เพื่อดูรายละเอียด แก้ไข key หรือ value แล้ว save ได้ทันที พร้อมปุ่ม copy value และ delete พร้อม confirmation เพื่อกันพลาดลบข้อมูลสำคัญ
• เพิ่มค่าใหม่ได้อย่างปลอดภัย — สร้าง key-value pair ใหม่ผ่าน UI ได้เลย โดยมี validation ตรวจสอบ key ที่ว่างเปล่าหรือไม่ปลอดภัย ขนาดของ value และความถูกต้องของ JSON format
• Backup และ migrate ข้อมูลข้าม environment — export ข้อมูลทั้งหมดเป็นไฟล์ JSON เพื่อ backup หรือย้ายไปใช้กับ origin อื่น และ import กลับมาได้ พร้อม validation ทุกขั้นตอน

Key Features

• Security-first design — ค่าที่แสดงใน preview ถูก sanitize เพื่อกันการตีความโค้ดอันตราย และระบบปฏิเสธ dangerous keys เช่น __proto__, constructor และ prototype ที่อาจนำไปสู่ prototype pollution ได้
• ขีดจำกัดชัดเจน — key จำกัดที่ 512 ตัวอักษร, value สูงสุด 5 MB, และรองรับได้ถึง 1,000 items ต่อ origin ซึ่งครอบคลุมกรณีการใช้งานปกติทั้งหมดของ web storage
• รับมือกับสถานการณ์จริง — หากเบราว์เซอร์ปิดการใช้งาน LocalStorage (เช่น โหมด privacy บางแบบ) เครื่องมือจะแจ้งให้รู้แทนที่จะ crash เพื่อให้คุณ debug ต่อได้

How to Use

1. เปิด LocalStorage Inspector จาก origin เดียวกับข้อมูลที่ต้องการตรวจสอบ เครื่องมือจะอ่าน LocalStorage ของ origin ปัจจุบันให้อัตโนมัติ และแสดงจำนวน items, total size และ origin ที่กำลังดูอยู่ด้านบน หากแอปอยู่คนละ origin ต้อง deploy หรือรันเครื่องมือนี้ภายใต้ origin เดียวกัน หรือใช้ DevTools ของแอปแทน
2. ใช้ช่อง search เพื่อกรองรายการที่ต้องการ โดยพิมพ์คำค้นที่ตรงกับ key หรือ value ได้ทั้งสองแบบ เมื่อพบ item ที่ต้องการ คลิกเพื่อดูรายละเอียดและ preview แบบเต็ม ซึ่งจะบอกว่าเป็น JSON หรือ plain text พร้อม format JSON ให้อ่านง่าย
3. แก้ไขข้อมูลโดยพิมพ์ key หรือ value ใหม่ในช่องแก้ไข จากนั้นกด Save เพื่อเขียนลง LocalStorage ทันที หรือกด Copy เพื่อคัดลอก value ไปใช้ที่อื่น และถ้าต้องการลบรายการ ให้กด Delete แล้วยืนยันอีกครั้ง
4. เพิ่มข้อมูลใหม่ด้วยปุ่ม Add โดยกรอก key และ value ระบบจะตรวจสอบว่า key ไม่ว่างเปล่าและปลอดภัย ขนาด value ไม่เกินขีดจำกัด และถ้า value ควรเป็น JSON ก็จะตรวจ format ให้ถูกต้องก่อนบันทึก
5. เมื่อต้องการ backup หรือย้ายข้อมูล ให้กด Export เพื่อดาวน์โหลดไฟล์ JSON ทั้งหมด และใช้ปุ่ม Import เพื่อเลือกไฟล์ JSON (ไม่เกิน 5 MB) กลับเข้ามา ข้อมูลจะถูก validate และเขียนลง LocalStorage ให้ ส่วนปุ่ม Refresh ใช้โหลดข้อมูลจาก browser storage ใหม่ และ Clear All สำหรับล้างทั้งหมดโดยต้องยืนยันก่อนเสมอ

ทำความเข้าใจ: LocalStorage, Same-Origin และการเก็บข้อมูลฝั่ง Client

ก่อนใช้เครื่องมือนี้ให้เต็มประสิทธิภาพ ควรเข้าใจธรรมชาติของ LocalStorage ซึ่งเป็นหัวใจของ web storage ในเบราว์เซอร์

ข้อมูลถูกเก็บฝั่ง client ในเบราว์เซอร์เท่านั้น — ทุกอย่างที่คุณเห็นใน LocalStorage Inspector อยู่บนเครื่องของผู้ใช้ ไม่เคยถูกส่งไปยัง server ของเราหรือ server ใด ๆ ข้อมูลไม่ได้ถูก upload ไปเก็บที่ใด การ export จะเกิดขึ้นบนเครื่องคุณเอง และการ import ก็เขียนลง browser storage ของคุณโดยตรง นี่คือข้อดีด้าน privacy แต่ก็หมายความว่าข้อมูลจะหายไปเมื่อผู้ใช้ล้างข้อมูลเว็บไซต์หรือเปลี่ยนเครื่อง

Same-origin policy แยกข้อมูลแต่ละเว็บไซต์ — LocalStorage ถูกจำกัดด้วย origin (scheme + host + port) เช่น ข้อมูลของ https://example.com จะมองไม่เห็นจาก https://sub.example.com หรือ http://example.com และไม่มีทางอ่านข้าม origin ได้ นี่คือเหตุผลที่ LocalStorage Inspector ดูได้เฉพาะข้อมูลของเว็บไซต์ที่คุณเปิดอยู่เท่านั้น และถ้าคุณต้องการย้ายข้อมูลข้าม origin ให้ใช้ Export/Import เป็นตัวช่วย

LocalStorage เก็บทุกอย่างเป็น strings — ถึงแม้คุณจะเซฟ object หรือ array เข้าไป เบราว์เซอร์จะแปลงเป็น string เสมอ นี่คือสาเหตุที่ค่าใน localStorage ส่วนใหญ่เป็น JSON string และทำไมฟีเจอร์ preview ที่แยกแยะ JSON กับ plain text ของเครื่องมือเราถึงมีประโยชน์มาก

// localStorage เก็บได้เฉพาะ string — ต้องแปลง object ก่อน
localStorage.setItem('user', JSON.stringify({ name: 'Somchai', role: 'admin' }));

// อ่านกลับมาแล้วแปลงเป็น object อีกครั้ง
const user = JSON.parse(localStorage.getItem('user'));

// ลบทีละ key หรือล้างทั้งหมด
localStorage.removeItem('user');
localStorage.clear();

อย่าสับสนกับ storage ประเภทอื่น — sessionStorage คล้ายกันแต่ข้อมูลจะถูกล้างเมื่อปิดแท็บ และ cookies จะถูกส่งไปยัง server ทุกครั้งที่มี request (LocalStorage ไม่ส่งไป server เลย) เครื่องมือนี้ตรวจสอบได้เฉพาะ LocalStorage ของ origin ปัจจุบัน ไม่รวม sessionStorage หรือ cookies ของเว็บอื่น และไม่สามารถเข้าถึงข้อมูลข้าม origin ได้ตามข้อจำกัดของเบราว์เซอร์

Practical Use Cases

Debug แอปพลิเคชันระหว่างพัฒนา

สมมติว่าผู้ใช้รายงานว่า theme ของเว็บไม่เปลี่ยนตามที่ตั้งไว้ ข้อมูลถูกเก็บใน key app_settings เป็น JSON เปิด LocalStorage Inspector แล้ว search หา theme ระบบจะเจอทั้งจาก key และ value ในทันที จากนั้นคลิกดูรายละเอียดเพื่อตรวจสอบว่า value เป็น {"theme":"dark","lang":"th"} จริงหรือถูกเขียนทับด้วยค่าที่ผิด แล้วแก้ไขและ save ได้ทันทีโดยไม่ต้องเปิด DevTools

ตรวจสอบและแก้ไข token หรือข้อมูล session ที่ค้าง

ถ้าแอปที่อยู่ origin เดียวกับเครื่องมือมี token หรือ session เก่าค้างอยู่จนผู้ใช้ stuck ในสถานะ login ที่ผิดพลาด ให้ search หา key ที่เกี่ยวข้อง เช่น token หรือ auth ดูวันหมดอายุหรือค่า payload ที่เก็บไว้ แล้วลบหรือแก้ไขเพื่อรีเซ็ตสถานะ พร้อม confirmation ทุกครั้งก่อนลบเพื่อความปลอดภัย

Backup และ migrate ข้อมูลระหว่าง environment

เวลาย้ายข้อมูลจาก staging ไป production หรือต้องการสำรองข้อมูลก่อนทดสอบฟีเจอร์ใหม่ ให้กด Export เพื่อดาวน์โหลดไฟล์ JSON ทั้งหมดเก็บไว้ จากนั้นเปิดเว็บไซต์เป้าหมาย เปิด LocalStorage Inspector แล้ว Import ไฟล์กลับเข้ามา ข้อมูลจะถูก validate ก่อนเขียนลง LocalStorage ช่วยให้ migrate ระหว่าง dev/staging/production เป็นเรื่องง่าย

ทำความสะอาดข้อมูลค้างเพื่อแก้ปัญหาเว็บช้า

เว็บแอปที่เก็บข้อมูลเยอะ ๆ ลง localStorage อาจสะสม key ที่ไม่ใช้แล้วเป็นสิบรายการ สร้างรายงานภาพรวมของ items และ total size ก่อนตัดสินใจ แล้วใช้ปุ่ม Delete ทีละรายการ หรือถ้าแน่ใจว่าล้างได้ทั้งหมดก็ใช้ Clear All หลังยืนยัน เพื่อคืนพื้นที่และลดความยุ่งยากในการ debug

Best Practices

• เก็บเฉพาะข้อมูลที่ไม่ sensitive — localStorage เปิดอ่านได้จาก JavaScript ใด ๆ ในหน้าเว็บ จึงไม่ควรเก็บ password, access token ที่มีสิทธิ์สูง หรือข้อมูลส่วนตัวสำคัญไว้ที่นี่ ให้ใช้ httpOnly cookie หรือ server-side storage แทน
• กำหนด namespace ให้ key — ใช้ prefix เช่น app_name.user.preference แทน pref เพื่อลดโอกาสชนกับ library อื่น และทำให้ search ในเครื่องมือเราง่ายขึ้น
• ตรวจสอบ JSON format ทุกครั้งที่เขียน — ใช้ JSON.stringify ตอนเซฟ และ JSON.parse พร้อม try/catch ตอนอ่าน เพราะ value ที่เสีย format จะทำให้แอป crash ได้ ซึ่ง preview ของ LocalStorage Inspector ช่วยเช็คได้ก่อน
• สำรองข้อมูลก่อนการเปลี่ยนแปลงครั้งใหญ่ — Export ไฟล์ JSON ไว้ก่อนทดสอบโค้ดที่ลบหรือเขียนทับ keys เดิม จะได้กู้คืนได้ทันทีถ้าพลาด
• ล้างข้อมูลที่ไม่ใช้แล้วเป็นประจำ — ตรวจสอบ total size และ items ที่ค้างเป็นระยะ ข้อมูลที่โตเกินขีดจำกัด (ประมาณ 5 MB ต่อ origin) จะทำให้ setItem โยน QuotaExceededError
• ระวังเรื่อง security ของ keys — หลีกเลี่ยง key ที่เป็น __proto__, constructor, prototype เพราะอาจก่อให้เกิด prototype pollution ซึ่งเครื่องมือเราปฏิเสธไว้ให้แล้วตั้งแต่ต้น

เริ่มใช้งาน LocalStorage Inspector ฟรี

ไม่ต้องติดตั้ง extension หรือลงทะเบียนใด ๆ เปิด LocalStorage Inspector จาก origin เดียวกับข้อมูลที่ต้องการตรวจสอบ ก็จะเห็นข้อมูล LocalStorage ของ origin นั้นทันที ไม่ว่าจะเป็นงาน debug ประจำวัน การตรวจสอบข้อมูลค้าง หรือการ backup ข้อมูลข้าม environment หากไม่สามารถรันเครื่องมือภายใต้ origin เดียวกับแอปได้ ให้ใช้ DevTools ของแอปแทน เพื่อให้การตรวจสอบ browser storage ถูกต้องตาม same-origin policy

Related Tools You Might Like:

• Cookie Manager — จัดการ cookies ของเบราว์เซอร์อย่างเป็นระบบ
• JSON Formatter — จัด format และ validate JSON ที่คุณเจอระหว่าง debug
• HTTP Headers Viewer — ตรวจสอบ HTTP headers ของ request และ response

Happy debugging!