210718 [수튜브] - 브라우저의 저장소

학습 시간

 

약 3시간

 

---

To Do

• 아래 이슈를 해결

 

---

학습 내용

 수튜브에서 사용자가 같은 광고를 중복 시청하지 않도록 방지하기 위해, localStorage를 사용하고 있습니다. 이번 학습시간에는 localStorage에 대한 이해를 높이기 위해 sessionStorage, cookie와 비교해보겠습니다. 그리고 브라우저별 실제 저장 위치와, 각 도메인별 저장용량 및 위치가 구체적으로 어떻게 되는지 알아보겠습니다.

 

 

| 브라우저의 저장소

	localStorage	sessionStorage	cookie
공통	- 데이터를 문자열 형태로 저장 (객체를 저장하고 싶다면 JSON 또는 store.js 활용) - key & value로 이루어짐 - same-origin policy에 따라, 도메인별로 다르게 관리
특징	- 사용자가 데이터에 접근 가능 - 동기 방식 (메인스레드가 중단 됨)		서버로 데이터 자동 전송 HTTP 요청시 이용
저장 기간	영구적 (삭제할 때까지)	세션이 유지되는 동안 (브라우저/탭을 유지하는 동안)	설정한 유효기간 동안
최대 용량	10MB	5MB	4KB
접근성	모든 윈도우	같은 탭	모든 윈도우
브라우저 호환성	Chrome(4) Edge(12) Firefox(3.5) Internet Explorer(8) Opera(10.5) Safari(4) WebView Android(37) Chrome Android(18) Firefox Android(4) Opera Android(11) Safari iOS(3.2) Samsung Internet(1.0)	Chrome(5) Edge(12) Firefox(2) Internet Explorer(8) Opera(10.5) Safari(4) WebView Android(37) Chrome Android(18) Firefox Android(4) Opera Android(11) Safari iOS(3.2) Samsung Internet(1.0)	Chrome(O) Edge(12) Firefox(O) Internet Explorer(O) Opera(O) Safari(O) WebView Android(O) Chrome Android(O) Firefox Android(O) Opera Android(O) Safari iOS(O) Samsung Internet(O)

이 외에도 비동기로 동작하는 IndexedDB와 Cache Storage API가 있습니다.

 

 

| 브라우저별 저장 위치와 형태

일단 제가 자주 이용하는 두 브라우저의 Local Storage 저장 위치를 알아보았습니다.

• Chrome
  C:\Users\사용자명\AppData\Local\Google\Chrome\User Data\Default\Local Storage\leveldb
• Whale
  C:\Users\사용자명\AppData\Local\Naver\Naver Whale\User Data\Default\Local Storage\leveldb

 

Chrome과 네이버 Whale 모두 LevelDB 형태로 데이터를 저장합니다. LevelDB는 구글이 개발한 key-value 저장 방식의 데이터베이스입니다.

 

 

 

다음 학습 계획

• same-origin policy 조사
• LevelDB와 IndexedDB, Cache Storage API 조사
• 광고 중복 재생 방지와 관련 로그 생성을 위해, 유저 식별 방식, 데이터 저장 방식 도출

 

 

 

참고자료 : Web Sotrage API, 동일 출처 정책, LevelDB , Indexed DB, Cache Storage