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