این راهنما به شما نشان می دهد که چگونه از Chrome DevTools برای مشاهده و تغییر داده های IndexedDB استفاده کنید. فرض بر این است که شما با DevTools آشنایی دارید. اگر نه، شروع کنید . همچنین فرض می کند که شما با IndexedDB آشنا هستید. اگر نه، استفاده از IndexedDB را ببینید.
مشاهده داده های IndexedDB
روی تب Application کلیک کنید تا پنل Application باز شود. منوی IndexedDB را باز کنید تا ببینید کدام پایگاه داده در دسترس است.
شکل 1 . منوی IndexedDB
- یادداشت ها - https://mdn.github.io یک پایگاه داده را نشان می دهد، جایی که notes نام پایگاه داده است و https://mdn.github.io مبدایی است که می تواند به پایگاه داده دسترسی پیدا کند.
- notes یک فروشگاه اشیا است.
- عنوان و بدنه شاخص هستند.
روی یک پایگاه داده کلیک کنید تا مبدا و شماره نسخه آن را ببینید.
شکل 2 . پایگاه یادداشت ها
برای مشاهده جفتهای کلید-مقدار آن، روی یک فروشگاه شی کلیک کنید.
شکل 3 . یادداشت ها شی ذخیره می شوند
- مجموع ورودی ها تعداد کل جفت های کلید-مقدار در ذخیره شی است.
- مقدار مولد کلید کلید موجود بعدی است. این فیلد فقط هنگام استفاده از مولدهای کلیدی نشان داده می شود.
برای گسترش آن مقدار، روی یک سلول در ستون Value کلیک کنید.
شکل 4 . مشاهده یک مقدار IndexedDB
برای مرتب کردن شیء ذخیره بر اساس مقادیر آن شاخص، روی یک نمایه، مانند عنوان یا بدنه در شکل 6 زیر کلیک کنید.
شکل 5 . یک ذخیره شی که بر اساس کلید عنوان آن بر اساس حروف الفبا مرتب شده است
داده های IndexedDB را تازه کنید
مقادیر IndexedDB در پنل Application در زمان واقعی به روز نمی شوند. روی Refresh کلیک کنید هنگام مشاهده یک شی ذخیره می شود تا داده های آن را به روز کند، یا یک پایگاه داده را مشاهده کنید و روی Refresh database کلیک کنید تا همه داده ها به روز شوند.
شکل 6 . مشاهده یک پایگاه داده
داده های IndexedDB را ویرایش کنید
کلیدها و مقادیر IndexedDB از پنل Application قابل ویرایش نیستند. از آنجایی که DevTools به زمینه صفحه دسترسی دارد، می توانید کد جاوا اسکریپت را در DevTools اجرا کنید که داده های IndexedDB را ویرایش می کند.
داده های IndexedDB را با Snippets ویرایش کنید
Snippet ها راهی برای ذخیره و اجرای بلوک های کد جاوا اسکریپت در DevTools هستند. هنگامی که یک Snippet را اجرا می کنید، نتیجه در Console ثبت می شود. برای اجرای کد جاوا اسکریپت که پایگاه داده IndexedDB را ویرایش می کند، می توانید از Snippet استفاده کنید.
شکل 7 . استفاده از Snippet برای تعامل با IndexedDB
داده های IndexedDB را حذف کنید
یک جفت کلید-مقدار IndexedDB را حذف کنید
- مشاهده یک انبار شی IndexedDB .
روی جفت کلید و مقداری که میخواهید حذف کنید کلیک کنید. DevTools آن را آبی رنگ می کند تا نشان دهد که انتخاب شده است.
شکل 8 . انتخاب یک جفت کلید-مقدار به منظور حذف آن
کلید Delete را فشار دهید یا روی Delete Selected کلیک کنید .
شکل 9 . پس از حذف جفت کلید-مقدار، ذخیره شی چگونه به نظر می رسد
تمام جفتهای کلید-مقدار را در یک فروشگاه شی حذف کنید
مشاهده یک انبار شی IndexedDB .
شکل 10 . مشاهده یک فروشگاه اشیاء
روی Clear object store کلیک کنید .
یک پایگاه داده IndexedDB را حذف کنید
- پایگاه داده IndexedDB را که می خواهید حذف کنید، مشاهده کنید .
روی حذف پایگاه داده کلیک کنید.
شکل 11 . دکمه حذف پایگاه داده
تمام فضای ذخیره سازی IndexedDB را حذف کنید
- پنجره Clear storage را باز کنید.
- مطمئن شوید که چک باکس IndexedDB فعال باشد.
روی پاک کردن دادههای سایت کلیک کنید.
شکل 12 . پنجره Clear Storage