คู่มือนี้จะแสดงวิธีใช้ Chrome DevTools เพื่อดูและเปลี่ยนแปลงข้อมูล IndexedDB โดยสมมติว่าคุณคุ้นเคยกับเครื่องมือสำหรับนักพัฒนาเว็บอยู่แล้ว หากไม่ โปรดดูที่เริ่มต้นใช้งาน สมมติว่าคุณคุ้นเคยกับ IndexedDB แล้ว หากไม่ โปรดดูที่การใช้ IndexedDB
ดูข้อมูล IndexedDB
คลิกแท็บแอปพลิเคชันเพื่อเปิดแผงแอปพลิเคชัน ขยายเมนู IndexedDB เพื่อดูฐานข้อมูลที่ใช้ได้
รูปที่ 1 เมนู IndexedDB
- note - https://mdn.github.io คือฐานข้อมูล โดยที่ note คือชื่อของฐานข้อมูล และ https://mdn.github.io คือต้นทางที่เข้าถึงฐานข้อมูลได้
- note เป็น ที่เก็บออบเจ็กต์
- title และ body คือ index
คลิกฐานข้อมูลเพื่อดูต้นทางและหมายเลขเวอร์ชัน
รูปที่ 2 ฐานข้อมูล notes
คลิกที่เก็บออบเจ็กต์เพื่อดูคู่คีย์-ค่า
รูปที่ 3 ที่เก็บออบเจ็กต์ notes
- รายการทั้งหมดคือจำนวนคู่คีย์-ค่าทั้งหมดในที่เก็บออบเจ็กต์
- ค่าของตัวสร้างคีย์คือคีย์ถัดไปที่ใช้ได้ ช่องนี้จะแสดงเฉพาะเมื่อใช้โปรแกรมสร้างคีย์
คลิกเซลล์ในคอลัมน์ค่าเพื่อขยายค่านั้น
รูปที่ 4 การดูค่า IndexedDB
คลิกดัชนี เช่น title หรือ body ในรูปที่ 6 ด้านล่างเพื่อจัดเรียงที่เก็บออบเจ็กต์ตามค่าของดัชนีนั้น
รูปที่ 5 ที่เก็บออบเจ็กต์ที่จัดเรียงตามลำดับตัวอักษรตามคีย์ชื่อ
รีเฟรชข้อมูล IndexedDB
ค่า IndexedDB ในแผงแอปพลิเคชันไม่อัปเดตแบบเรียลไทม์ คลิกรีเฟรช เมื่อดูที่เก็บออบเจ็กต์เพื่อรีเฟรชข้อมูล หรือดูฐานข้อมูลแล้วคลิกรีเฟรชฐานข้อมูลเพื่อรีเฟรชข้อมูลทั้งหมด
รูปที่ 6 การดูฐานข้อมูล
แก้ไขข้อมูล IndexedDB
คีย์และค่า IndexedDB จะแก้ไขจากแผงแอปพลิเคชันไม่ได้ อย่างไรก็ตาม เนื่องจากเครื่องมือสำหรับนักพัฒนาเว็บจะเข้าถึงบริบทของหน้าเว็บได้ คุณจึงเรียกใช้โค้ด JavaScript ภายในเครื่องมือสำหรับนักพัฒนาเว็บที่แก้ไขข้อมูล IndexedDB ได้
แก้ไขข้อมูล IndexedDB ด้วยข้อมูลโค้ด
ข้อมูลโค้ดเป็นวิธีจัดเก็บและเรียกใช้บล็อกโค้ด JavaScript ภายในเครื่องมือสำหรับนักพัฒนาเว็บ เมื่อเรียกใช้ข้อมูลโค้ด ระบบจะบันทึกผลลัพธ์ไปยังคอนโซล คุณใช้ข้อมูลโค้ดเพื่อเรียกใช้โค้ด JavaScript ที่แก้ไขฐานข้อมูล IndexedDB ได้
รูปที่ 7 การใช้ข้อมูลโค้ดเพื่อโต้ตอบกับ IndexedDB
ลบข้อมูล IndexedDB
ลบคู่คีย์-ค่า IndexedDB
- ดูที่เก็บออบเจ็กต์ IndexedDB
คลิกคู่คีย์-ค่าที่ต้องการลบ เครื่องมือสำหรับนักพัฒนาเว็บจะไฮไลต์สีน้ำเงินเพื่อบอกว่า มีการเลือกเครื่องมือแล้ว
รูปที่ 8 การเลือกคู่คีย์-ค่าเพื่อลบ
กดปุ่ม Delete หรือคลิกลบรายการที่เลือก
รูปที่ 9 ลักษณะการจัดเก็บออบเจ็กต์หลังจากลบคู่คีย์-ค่าแล้ว
ลบคู่คีย์-ค่าทั้งหมดในที่เก็บออบเจ็กต์
-
รูปที่ 10 การดูที่เก็บออบเจ็กต์
คลิกล้างที่เก็บออบเจ็กต์
ลบฐานข้อมูล IndexedDB
- ดูฐานข้อมูล IndexedDB ที่คุณต้องการลบ
คลิกลบฐานข้อมูล
รูปที่ 11 ปุ่มลบฐานข้อมูล
ลบพื้นที่เก็บข้อมูล IndexedDB ทั้งหมด
- เปิดแผงล้างพื้นที่เก็บข้อมูล
- ตรวจสอบว่าได้เปิดใช้ช่องทำเครื่องหมาย IndexedDB แล้ว
คลิกล้างข้อมูลเว็บไซต์
รูปที่ 12 แผงล้างพื้นที่เก็บข้อมูล