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

Kayce Basques

Twitter GitHub กลิทช์

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

ดูข้อมูล IndexedDB

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

   

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

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

หมายเหตุ: ข้อจำกัดที่ทราบ ฐานข้อมูลของบุคคลที่สามจะไม่ปรากฏ ตัวอย่างเช่น หากคุณใช้ <iframe> เพื่อฝังโฆษณาในหน้าเว็บของคุณ และเครือข่ายโฆษณาใช้ IndexedDB ข้อมูล IndexedDB ของเครือข่ายโฆษณาของคุณจะไม่แสดง ดูปัญหา #943770

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

   

   รูปที่ 2 ฐานข้อมูล notes

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

   ข้อควรระวัง: ข้อมูล IndexedDB ไม่อัปเดตแบบเรียลไทม์ โปรดดูรีเฟรชข้อมูล IndexedDB

   

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

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

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

   

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

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

   

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

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

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

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

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

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

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

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

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

ลบข้อมูล IndexedDB

ลบคู่คีย์-ค่า IndexedDB

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

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

   

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

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

   

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

ลบคู่คีย์-ค่าทั้งหมดในที่เก็บออบเจ็กต์

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

   

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

2. คลิกล้างที่เก็บออบเจ็กต์

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

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

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

   

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

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

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

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

   

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