ดูและเปลี่ยนข้อมูล IndexedDB

Kayce Basques

คู่มือนี้แสดงวิธีใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อดูและเปลี่ยนแปลงข้อมูล IndexedDB สมมติว่าคุณคุ้นเคยกับเครื่องมือสำหรับนักพัฒนาเว็บ หากยังไม่ได้ติดตั้ง โปรดดูหัวข้อเริ่มต้นใช้งาน และถือว่าคุณคุ้นเคยกับ IndexedDB แล้ว หากไม่อยู่ โปรดดูการใช้ IndexedDB

ดูข้อมูล IndexedDB

1. คลิกแท็บแอปพลิเคชันเพื่อเปิดแผงแอปพลิเคชัน ขยายเมนู IndexedDB เพื่อดูฐานข้อมูลที่พร้อมใช้งาน

   

   รูปที่ 1 เมนู IndexedDB

   • หมายเหตุ - https://mdn.github.io หมายถึงฐานข้อมูล โดยที่ notes คือชื่อของฐานข้อมูลและ https://mdn.github.io เป็นต้นทางที่เข้าถึงฐานข้อมูลได้
   • หมายเหตุคือ ที่เก็บออบเจ็กต์
   • title และ body คือ indexes

1. คลิกฐานข้อมูลเพื่อดูต้นทางและหมายเลขเวอร์ชัน

   

   รูปที่ 2 ฐานข้อมูลหมายเหตุ

2. คลิกที่เก็บออบเจ็กต์เพื่อดูคู่คีย์-ค่า

   

   รูปที่ 3 ที่เก็บออบเจ็กต์ notes

   • รายการทั้งหมดคือจำนวนคู่คีย์-ค่าทั้งหมดในที่เก็บออบเจ็กต์
   • ค่าตัวสร้างคีย์คือคีย์ถัดไปที่ใช้ได้ ช่องนี้จะแสดงเฉพาะเมื่อใช้โปรแกรมสร้างคีย์

3. คลิกเซลล์ในคอลัมน์ค่าเพื่อขยายค่านั้น

   

   รูปที่ 4 การดูค่า IndexedDB

4. คลิกดัชนี เช่น title หรือ body ในรูปที่ 6 ด้านล่างเพื่อจัดเรียงออบเจ็กต์สโตร์ตามค่าของดัชนีนั้น

   

   รูปที่ 5 ที่เก็บออบเจ็กต์ที่จัดเรียงตามตัวอักษรตามคีย์ title

รีเฟรชข้อมูล IndexedDB

ค่า IndexedDB ในแผง Application ไม่อัปเดตแบบเรียลไทม์ คลิกรีเฟรช เมื่อดูที่เก็บออบเจ็กต์เพื่อรีเฟรชข้อมูล หรือดูฐานข้อมูล และคลิกรีเฟรชฐานข้อมูลเพื่อรีเฟรชข้อมูลทั้งหมด

รูปที่ 6 การดูฐานข้อมูล

แก้ไขข้อมูล IndexedDB

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

แก้ไขข้อมูล IndexedDB ด้วยข้อมูลโค้ด

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

รูปที่ 7 การใช้ข้อมูลโค้ดเพื่อโต้ตอบกับ IndexedDB

ลบข้อมูล IndexedDB

ลบคู่คีย์-ค่าของ IndexedDB

1. ดูที่เก็บออบเจ็กต์ IndexedDB

2. คลิกคู่คีย์-ค่าที่ต้องการลบ เครื่องมือสำหรับนักพัฒนาเว็บจะไฮไลต์เป็นสีน้ำเงินเพื่อระบุว่า ถูกเลือกอยู่

   

   รูปที่ 8 เลือกคู่คีย์-ค่าเพื่อลบ

3. กดปุ่ม Delete หรือคลิกลบรายการที่เลือก

   

   รูปที่ 9 ลักษณะที่จัดเก็บออบเจ็กต์หลังจากลบคู่คีย์-ค่าแล้ว

ลบคู่คีย์-ค่าทั้งหมดใน Object Store

1. ดูที่เก็บออบเจ็กต์ IndexedDB

   

   รูปที่ 10 การดูที่เก็บออบเจ็กต์

2. คลิก ล้างการจัดเก็บออบเจ็กต์

ลบฐานข้อมูล IndexedDB

1. ดูฐานข้อมูล IndexedDB ที่ต้องการลบ

2. คลิกลบฐานข้อมูล

   

   รูปที่ 11 ปุ่มลบฐานข้อมูล

ลบพื้นที่เก็บข้อมูล IndexedDB ทั้งหมด

1. เปิดแผงล้างพื้นที่เก็บข้อมูล
2. ตรวจสอบว่าช่องทำเครื่องหมาย IndexedDB เปิดใช้อยู่

3. คลิกล้างข้อมูลเว็บไซต์

   

   รูปที่ 12 แผงล้างพื้นที่เก็บข้อมูล