<aside> 🔥 웹 브라우저에 정보를 저장할 수 없을까?!…

</aside>

정보를 서버에 저장하는 것과 클라이언트에 저장하는 것의 차아

  1. 속도
    1. 네트워크를 통하지 않기 때문에 클라이언트에 저장하면 더 빠르다. ⇒ 비용 절감
    2. 오프라인에서도 데이터를 가져올 수 있다.
    3. 사용자의 정보가 서버로 전송되지 않으니, 안전하게 클라이언트에게 보관된다.

사용자 정보를 브라우저에 저장하는 방법

Cookie LocalStorage IndexedDB
저장공간 소량 5MB 브라우저마다 정책이 다르다. (chrome 사용자 디스크에80%)
네트워크 포함 포함됨 (정보를 브라우저에 저장하면 저장했던 웹사이트에 접속했을때 쿠키를 서버에 전송한다. ) 포함이 안됨 포함이 안됨
데이터 타입 문자열 문자열 제한 없음
동작 방법 동기식 동기식 비동기식 (성능이 좋다)
난이도 쉬움 쉬움 어려움

스크린샷 2023-04-22 오후 3.30.38.png

개발시작

1. DB를 만든다.

const dbReq = indexedDB.open('opentutorials', 1);

<aside> 🔥

db를 이렇게 만든다고해서 바로 만들어지는게 아니고 dpReq에는 대기번호 같은 것이 담긴다.

</aside>

2. DB가 성공적으로 열렸을때 콜백함수 실행