231001 TIL

indexedDB

클라이언트 스토리지의 한 종류 (그외에 local storage와 cookies가 있다.)

 

 

cookie 

• cookie에 정보를 담아 서버로 요청을 보냄.  
• 용량이 작아 속도가 빠름
•  보안상의 문제가 있다.
• 한번에 하나의 정보만 저장이 가능.

 

local storage 

• 브라우저에 반영구적으로 데이터 저장.
• 브라우저를 종료해도 데이터 유지.
• 도메인이 다른 겨우에는 접근 불가.

Indexed DB 

• 용량제한이 없는 비동기적 동작 방식을 지닌 스토리지
• index로 탐색한다. 

 

 

 

index DB 기본 사용법

1. DB 열기

2. DB에 objectStore 생성

3. transaction 시작(CRUD등 db작업요청)

4. 이벤트 리스너를 사용, 요청완료까지 대기

5. 요청결과로 특정 동작

shareBtn.addEventListener('click',function(){

       if(window.indexedDB){ //win객체에 idxDB가 있을 때
       //호환성검사
       const databaseName = 'instagram';
       const version = 1;
       const req = indexedDB.open(databaseName,version);
       //database를 open명령어로 열도록 요청.
       console.log(req)
       
       const data = {
        content: document.querySelector('.modal__write > textarea').value,
       image: imageBase64
       };

       req.onupgradeneeded = function(){
           //req객체속메소드중하나
           //dbname과 version이 바뀔 때 실행되는 것
        req.result.createObjectStore('posts',{ autoIncrement:true });//post객체스토어에id가자동증가저장
        };
        
        //createObjectStore(데이터를담는곳)특정 DB에 objectStroe추가
        //onupgradeneeded와 함께 사용해야함(새db만들때,기존db버전업글때) 이후 onsuccess핸들러를 사용

        req.onsuccess = function(){
            //실행이후작동되는함수
           const store = req.result
           .transaction('posts','readwrite')
           .objectStore('posts');
           console.log(store);
	   //transaction db상태를 변화시키기 위한 작업단위
       //db객체 단위로 작동하므로 객체 저장소를 지정해줘야함. 이를 통해 접근 후 데이터 요청
       //readonly,readwrite,versionchange 세가지모드
           
           //req가끝나고 post의권한을readwrite로하는통신을시작후 objStr로 post를가져옴
           store.add(data);
        //store에 data(글과이미지) 추가
        }

        }
    }
   
    )