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

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

ดูข้อมูล IndexedDB

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

    เมนู IndexedDB

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

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

    ฐานข้อมูล "notes"

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

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

    พื้นที่เก็บข้อมูลออบเจ็กต์ "notes"

    รูปที่ 3 พื้นที่เก็บข้อมูลออบเจ็กต์ notes

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

    การดูค่า IndexedDB

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

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

    จัดเรียงที่เก็บออบเจ็กต์ตามดัชนี

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

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

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

การดูฐานข้อมูล

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

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

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

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

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

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

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

ลบข้อมูล IndexedDB

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

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

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

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

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

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

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

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

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

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

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

  2. คลิกล้างพื้นที่เก็บข้อมูลออบเจ็กต์ ล้างพื้นที่เก็บข้อมูลออบเจ็กต์

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

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

    ปุ่ม "ลบฐานข้อมูล"

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

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

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

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

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