이 가이드에서는 Chrome DevTools를 사용하여 IndexedDB 데이터를 확인하고 변경하는 방법을 보여줍니다. 여기서는 개발자가 DevTools에 익숙하다고 가정합니다. 그렇지 않은 경우 시작하기를 참고하세요. 또한 사용자가 IndexedDB에 익숙하다고 가정합니다. 그렇지 않으면 IndexedDB 사용을 참조하세요.
IndexedDB 데이터 보기
Application 탭을 클릭하여 Application 패널을 엽니다. IndexedDB 메뉴를 확장하여 사용 가능한 데이터베이스를 확인합니다.
그림 1. IndexedDB 메뉴
notes - https://mdn.github.io는 데이터베이스를 나타냅니다. 여기서 notes는 데이터베이스의 이름이고, https://mdn.github.io는 데이터베이스에 액세스할 수 있는 출처입니다.
notes는 객체 저장소입니다.- title 및 body는 색인입니다.
데이터베이스를 클릭하여 원본과 버전 번호를 확인합니다.
그림 2. notes 데이터베이스
키-값 쌍을 보려면 객체 저장소를 클릭하세요.
그림 3. notes 객체 저장소
- 총 항목 수는 객체 저장소의 키-값 쌍의 총 개수입니다.
- 키 생성기 값은 다음으로 사용 가능한 키입니다. 이 필드는 키 생성기를 사용할 때만 표시됩니다.
값 열의 셀을 클릭하여 값을 펼칩니다.
그림 4. IndexedDB 값 보기
아래 그림 6의 title 또는 body와 같은 색인을 클릭하여 해당 색인의 값에 따라 객체 저장소를 정렬합니다.
그림 5. title 키에 따라 알파벳순으로 정렬된 객체 저장소
IndexedDB 데이터 새로고침
Application 패널의 IndexedDB 값은 실시간으로 업데이트되지 않습니다. 객체 저장소를 볼 때 새로고침
을 클릭하여 데이터를 새로고침하거나 데이터베이스를 보고 데이터베이스 새로고침을 클릭하여 모든 데이터를 새로고침합니다.
그림 6. 데이터베이스 보기
IndexedDB 데이터 수정
IndexedDB 키와 값은 Application 패널에서 수정할 수 없습니다. 그러나 DevTools는 페이지 컨텍스트에 액세스할 수 있으므로 DevTools 내에서 IndexedDB 데이터를 수정하는 JavaScript 코드를 실행할 수 있습니다.
스니펫으로 IndexedDB 데이터 수정
스니펫은 DevTools 내에서 JavaScript 코드 블록을 저장하고 실행하는 방법입니다. 스니펫을 실행하면 결과가 콘솔에 로깅됩니다. 스니펫을 사용하여 IndexedDB 데이터베이스를 수정하는 JavaScript 코드를 실행할 수 있습니다.
그림 7. 스니펫을 사용하여 IndexedDB와 상호작용
IndexedDB 데이터 삭제
IndexedDB 키-값 쌍 삭제
- IndexedDB 객체 저장소 보기
삭제할 키-값 쌍을 클릭합니다. DevTools가 파란색으로 강조 표시하여 선택되었음을 나타냅니다
그림 8. 삭제하려면 키-값 쌍 선택
Delete 키를 누르거나 선택 항목 삭제
를 클릭합니다.
그림 9. 키-값 쌍이 삭제된 후 객체 저장소가 표시되는 방식
객체 저장소의 모든 키-값 쌍 삭제
-
그림 10. 객체 저장소 보기
Clear Object store
를 클릭합니다.
IndexedDB 데이터베이스 삭제
- 삭제할 IndexedDB 데이터베이스를 확인합니다.
데이터베이스 삭제를 클릭합니다.
그림 11. 데이터베이스 삭제 버튼
모든 IndexedDB 스토리지 삭제
- 저장용량 비우기 창을 엽니다.
- IndexedDB 체크박스가 선택되어 있는지 확인합니다.
사이트 데이터 삭제를 클릭합니다.
그림 12. 저장용량 비우기 창