IndexedDB
브라우저 안의 저장소
해결하는 문제
서버 없이도 껐다 켜도 남는 데이터 저장이 필요하다.
작은 설정은 localStorage에, 많은 기록과 파일은 IndexedDB에 저장해 서버 없는 앱을 만듭니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것앱에서 생긴 데이터
브라우저가 하는 일키-값 또는 표 형태로 브라우저에 보관
나오는 것다시 열어도 남는 데이터
쓰는 브라우저 기술
localStorageIndexedDBCache APIOPFS
라이브러리와 모델
idb-keyval (선택)
바꿀 수 있는 옵션
- 저장 용량 확인 (navigator.storage)
- 지속 저장 요청 (persist)
자주 막히는 곳
- 시크릿 창이나 브라우저 정리 시 데이터가 사라진다
- localStorage는 용량이 작고(수 MB) 문자열만 담는다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 대화 기록을 기기에만 저장하는 AI 메모
웹 서비스
- 오프라인 노트·할 일 앱
피지컬 AI
- 현장 측정값 임시 보관 후 일괄 전송
넓히는 방법
- 오프라인 앱(PWA)
- 내보내기·가져오기 백업
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
할 일 목록을 IndexedDB에 저장해서 브라우저를 껐다 켜도 남고, JSON으로 백업·복원할 수 있는 웹페이지를 만들어줘.
같은 분류의 능력
02 로컬 저장·오프라인 DB에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md