IDBRequest, IndexedDB
1️⃣ IDBRequest
IndexedDB API의 인터페이스
비동기 데이터베이스 작업(데이터 추가, 검색, 삭제)
= 모든 비동기 작업은 즉시, IDBRequest 인스턴스 반환
2️⃣ IndexedDB
브라우저 내장된 데이터베이스
- 키, 여러 키 유형별로 모든 종류 값을 저장한다
- 신뢰성 기반 거래 지원한다
- 주요 범위 쿼리, 인덱스 지원한다
- localStorage 보다 훨씬 많은 데이터를 저장할 수 있다
localStorage vs sessionStorage vs Cookie
1️⃣ localStorage vs sessionStorage
웹 스토리지 객체이다
데이터가 사라지지 않고 남아있게 해준다
브라우저 내에 key:value 쌍으로 저장할 수 있다
-
Map 과 비슷하다 but 인덱스를 사용해서 키에 접근할 수 있단 점에서 다르다
key(index)
-
localStorage : 페이지 새로고침 관련
오리진이 같은 탭, 창 전체에선 공유된다
= 도메인만 같으면 전역 공유 가능하다
브라우저를 끄고 다시 켜도 남아있다- sessionStorage 보다 더 자주 사용한다
- sessionStorage 보다 더 자주 사용한다
-
sessionStorage : 현재 떠 있는 탭 내에서만 유지된다 = 같은 페이지라도 다른 탭에 있으면 다른 곳에 저장되기 때문이다 = 침범하지 못한다
페이지 새로고침 할 때 사라지지 않지만 종료하면 사라진다(데이터 유지 X)
장점
- 탭 단위의 데이터 분리
- 탭(세션)마다 독립적인 저장공간을 가짐 → 같은 사이트를 여러 개 열어도 탭마다 다른 데이터를 저장 가능
- 로그인 상태를 탭별로 다르게 유지할 수 있음 (예: 한 탭에서는 A 계정, 다른 탭에서는 B 계정)
- 자동 정리 (메모리 관리 용이)
- 탭을 닫으면 자동으로 데이터가 삭제되므로, 수동으로 관리할 필요 없음
- 민감한 정보를 저장할 때 유용 (ex: 일회성 인증 정보)
- 빠른 접근 속도
- 브라우저 내 메모리에 저장되므로, 쿠키보다 빠르게 접근 가능
ex) textarea 필드를 만들었는데 사용자가 페이지를 닫고 나서도 내용을 다시 이어서 쓸 수 있게 만들고 싶다 = localStorage
<!doctype html>
<textarea style="width:200px; height: 60px;" id="area" placeholder="Write here"></textarea>
<br>
<button onclick="localStorage.removeItem('area');area.value=''">Clear</button>
<script>
area.value = localStorage.getItem('area');
area.oninput = () => {
localStorage.setItem('area', area.value)
};
</script>
2️⃣ 쿠키
브라우저에 저장되는 작은 크기 문자열
HTTP 프로토콜 일부
클라이언트 식별과 같은 인증에 가장 많이 쓰인다
3️⃣❓localStorage vs sessionStorage vs Cookie
❓쿠키가 있는데 왜 굳이 다른 객체를 사용해서 데이터 저장하나요?
1. 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않는다
→ 더 많은 자료 보관 가능(쿠키는 하나 사이트에 20개까지 저장가능)
2. 서버가 HTTP 헤더를 통해 스토리지 객체 조작할 수 없다
→ 자바스크립트 내에서 수행된다
3. 프로토콜, 서브 도메인이 다르면 데이터에 접근할 수 없다
4. 영구 데이터 저장이 가능하다
| 항목 | localStorage | sessionStorage | cookie |
|---|---|---|---|
| 데이터 유지 | 영구적 (삭제 전까지 유지) | 세션 종료 시 삭제 (탭/창 닫으면 사라짐) | 만료 기간 설정 가능 |
| 용량 제한 | 약 5MB | 약 5MB | 4KB + 도메인 1개당 20개까지 가능) |
| 서버 전송 여부 | 불가능 (서버로 자동 전송 X) | 불가능 (서버로 자동 전송 X) | 가능(요청마다 자동 전송) |
| 보안 | 비교적 안전 (XSS 주의) | 비교적 안전 (XSS 주의) | 상대적으로 취약 (CSRF, XSS 공격 위험) |
| 사용 목적 | 장기 데이터 저장 (토큰, 설정값) | 짧은 세션 데이터 저장 (임시 상태) | 인증, 트래킹, 세션 관리 |
Hello! My Name is oYJo