웹 스토리지

dong5854·2022년 6월 15일

토이프로젝트를 위해 파이어베이스 sns 로그인을 보던 중 파이어베이스로 로그인한 정보는 어떻게 관리가 될까 궁금해 개발자 도구를 뒤적거려보니까 IndexedDB를 사용하는 것을 보았다. 처음에는 당연히 Local Storage나 Session Storage를 사용할 줄 알고 그쪽을 보고 쿠키도 확인해봤는데 인증정보가 없더라... 그래서 Storage를 전부 뒤져보니 IndexedDB라는 곳에 인증 정보가 저장되어 있었다.

예전에 프로젝트를 할 때는 로컬 스토리지나 세션 스토리지를 사용해 개발했었는데 왜 파이어베이스는 IndexedDB를 쓰고 IndexedDB는 뭘까 궁금해 찾아보고 다른 웹 스토리지인 Local Storage, Session Storage, IndexedDB, Web SQL, Cookies, Cache API에 대해 알아보려한다.

Local Storage(로컬 스토리지)

로컬 스토리지의 특징들은 다음과 같다.

1) 문자열만 저장이 가능하다.
2) 저장된 데이터는 브라우저 세션 간에 공유된다.
3) 자바스크립트나 브라우저를 통해 명시적으로 삭제하지 않는 이상 삭제되지 않는다.
4) 로컬 스토리지는 동일 출처 정책(SOP, Same Origin Policy)을 따른다.

Local Storge는 동일 출처 정책을 따르기 때문에 Protocol(Scheme),Host(Domain), Port 세가지가 모두 동일해야한다고 한다. 생각해보면 정보의 보호를 위해 당연한 일인데 미처 생각하지 못하고 있던 부분이라 조사해보며 인상깊었던 부분이다.

Session Storage(세션 스토리지)

세션 스토리지의 특징들은 다음과 같다.

1) 문자열만 저장이 가능하다.
2) document가 브라우저의 특정 탭에 로드되면 유니크한 페이지 세션이 만들어지고 해당 탭에 할당되는데, 이 페이지 세션은 해당 탭에서만 유효하다.
3) 페이지 세션은 브라우저가 열려있는 한 새로고침과 페이지 복구를 거쳐도 남아있는다.
4) 저장된 데이터는 페이지를 새로운 탭이나 창에서 열면, 세션 쿠키의 동작과는 다르게 최상위 브라우징 맥락의 값을 가진 새로운 세션을 생성한다.
5) 동일한 URL에 대한 탭 혹은 브라우저 창을 여러개 열면 각각에 대해 새로운 세션 스토리지를 생성한다.
6) 탭을 복제하면 세션 스토리지도 새로운 탭으로 복사된다.
7) 탭 혹은 창을 닫으면 세션스토리지 안의 객체도 초기화된다.
8) 세션 스토리지는 동일 출처 정책(SOP, Same Origin Policy)을 따른다.

최상위 브라우징 맥락의 값..?🤔

MDN이 믿을 수 있는 출처라 생각해서 자료조사의 대부분은 MDN에서 했는데 저 4번에서 최상위 브라우징 맥락의 값이 무슨 뜻인지 이해가 가지않아 영어로 봤는데 top-level browsing context 라고 나온다. 당연히 영어로 봐도 뭔지 몰라 결국 또 구글링했다.

Browsing Context는 브라우저가 document를 표시하는 환경으로 가장 우리에게 익숙한 것은 탭이고 브라우저 창이나 페이지 내의 프레임이나 아이프레임이 될 수도 있다고 한다.

그렇다면 최상위 브라우징 맥락의 값은 Browsing Context들간의 관계에서 최상위에 있는 것이라고 이해하면 될 것 같은데
https://github.com/whatwg/html/issues/2322 해당 이슈에 이해하기 쉽게 그림으로 설명해주신 분이 있어 가져왔다.

<!-- a.html -->
<!doctype html>
<title>A</title>
<p>A</p>
<iframe src="b.html"></iframe>
<button onclick="window.open('c.html')">open</button>

여기서 button을 클릭하면 아래와 같이 3개의 browsing contextext 들이 생성된다고 한다.

+-------------------------------------+
| A                                   |
|  +-----------------------+          |
|  | B                     |          |
|  |                       |          |
|  +-----------------------+ ( open ) |
|                                     |
|         +-------------------------------------+
|         | C                                   |
|         |                                     |
+---------|                                     |
          |                                     |
          |                                     |
          +-------------------------------------+

여기서 A가 바로 최상위 브라우징 맥락 즉 top-level browsing context이다.
B는 A의 child browsing context이다.
C는 최상위 브라우징 맥락이고 Auxiliary browsing context라고한다. Authxiliart browsing context는 opener browsing context를 갖는데 해당 예시에서 C의 opener browsing context는 A이다.
browsing context에 대한 더 자세한 내용은 https://www.w3.org/html/wg/spec/browsers.html 이 링크에 있어 한번 읽어보면 좋을 것 같다.

탭을 복제??😵

5번을 보면 탭을 복제하면 세션스토리지가 복사된단다... 근데 살면서 탭을 복제한다는 이야기는 들어본적이 없어서 탭을 우클릭을 해봤더니 복제같은건 없더라. 그래서 구글링을 해봤더니 크롬 브라우저에서는 새로고침을 마우스 휠로 누르면 탭이 복제된다. 혹시 나 빼고 다른사람들은 다들 알고 있었나 싶긴하다.

세션 스토리지는 조사하던 중 모르는게 많아 좀 내용이 사족이 많았는데 지금 여기 정리를 안해두면 평생 정리를 안할거같아 그냥 같이 정리했다.😂

Cookies(쿠키)

쿠키의 특징은 다음과 같다.

1) 문자열만 저장이 가능하다.
2) persistent cookies와 session cookies 두 가지 유형이 있다.
3) persistent cookies는 만료일을 가지고 만료일이 지나면 삭제된다.
4) session cookies는 만료일이 따로 존재하지 않고 브라주어나 탭이 닫히면 삭제된다.
5) 매 HTTP 요청마다 포함되어 api 호출로 서버에 부담이 간다.
6) 약 4kb로 용량이 작다.

쿠키의 경우에는 로컬스토리지나 세션스토리지가 HTML5부터 지원했기 때문에 HTML5를 지원하지 않는 브라우저의 경우에 사용이 불가능한 2개와 달리 대부분의 브라우저에서 지원을 한다.

Cache API

Cache API 특징은 아래와 같다.

1) Cache API는 request에 대한 HTTP response를 저장하기 위한 클라이언트 저장소이다.
2) Service Worker가 제공하는 기능 중 하나이다.
3) 비동기로 동작해 메인 스레드 연산에 영향을 주지 않는다.

Cache API 네트워크로 불러온 리소스나 파일을 캐싱하는데 사용할 수 있다. 캐싱한 파일을 사용해 더 빠른 속도로 데이터에 접근을 할 수 있고 Cache API를 사용하면 클라이언트 측에 저장이 되기 때문에 더 네트워크의 연결이 없어도 리소스 혹은 정보를 사용할 수 있다.

Service Worker 😥

또 모르는 개념인 Service Worker가 나왔다..
자꾸 글과 관련이 없는 사족이 붙어 본능적인 거부감과 다른 포스팅으로 따로 정리하고 싶은 욕구가 일어나지만 따로 정리를 하지 않을 나를 잘 알기때문에 한번 더 꾹 참고 여기에 정리한다. 🤣

서비스 워커는 브라우저가 백그라운드에서 실행하는 스크립트로 웹 페이지와는 별개로 작동하며 웹페이지 또는 클라이언트의 인터렉션이 필요하지 않은 기능만 제공한다고 한다. 웹 페이지와는 별개로 존재하고 수명 주기 또한 별게이기 때문에 웹페이지가 닫히더라도 자동으로 비활성화되지 않고 DOM이나 window요소에 접근이 불가능하다.

위에서 말한 캐시와의 상호작용을 위해 사용할 수 있는데 fetch 이벤트의 중간자 역할로 사용되면 HTTP를 통해 정보를 요청하는 대신 가지고 있는 캐시에서 자료를 전달한다. 다른 활용법으로는 브라우저 차잉 닫힌 상태에서도 동작하기 때문에 푸시 알림을 구현할 수 있고, 파일을 업로드 하는 등의 작업 중 오프라인 상태가 되어도 다시 온라인 상태가 되었을 때 작업을 마저 완료할 수 있다.

WebSQL

WebSQL이라는게 있긴한데 WebSQL은 2010년 11월부터 deprecated되었기 때문에 사용하지 않아야한다고 한다고 하고 사용중이라고 한다면 IndexedDB로 마이그레이션을 해야한다고 한다.

IndexedDB

이제 다음은 해당 포스팅의 계기가 된 IndexedDB다.

1) 많은 양의 데이터를 저장할 수 있다.
2) 인덱스를 사용해 데이터를 빠르게 탐색할 수 있다.
3) 많은 양의 구조화된 데이터에 적합하다.
4) JS 기반의 객체지향 데이터베이스로 트랙잭션을 사용한다.
5) 간단히 사용하기엔 복잡해 localForage, Dexie.js, ZangoDB와 같은 래퍼를 사용하기도 한다.
6) 자바스크립트가 인식하는 자료형과 객체를 저장할 수 있다.
6) 비동기로 동작해 메인 스레드 연산에 영향을 주지 않는다.
7) IndexedDB는 동일 출처 정책(SOP, Same Origin Policy)을 따른다.

IndexedDB는 많은 데이터를 저장 할 수 있다. 사용하기 위해서는 데이터베이스 스키마를 지정하고, 데이터베이스와 연결한 후 트랜잭션을 통해 데이터를 가져오거나 업데이트해야한다.

문자열값만 사용이 가능한 로컬스토리지와 달리 자바스크립트가 인식할 수 있는 자료형과 객체를 저장할 수 있어 JSON.stringfy, JSON.parse와 같은 함수를 사용하지 않을 수 있다.

래핑의 경우에는 promise 형태로 래핑하고 사용을 편하게 해준다.

또 IndexedDB는 모든 동작이 비동기 호출이라는 점이 인상 깊었다.

무엇을 써야하나? 🤨

이 많은 스토리지들을 무엇을 사용해야하나 싶을 수 있다. 해당 의문에 대해 자세한 설명이 있는 글을 발견해 정리해보려한다. 될 수 있으면 이 글 말고 링크타고 저 글을 읽자.

위의 포스트의 글쓴이에 의하면 리소스 저장의 일반적인 권장 사항은 네트워크 리소스의 경우에는 Cache API, 다른 데이터의 경우 IndexedDB라고 한다. 둘 다 비동기식이며 메인 스레드의 연산에 영향을 주지 않고, window 객체로 접근할 수 있으며 웹 워커나 서비스 워커에서도 접근할 수 있어 자유롭게 활용이 가능하다.

다른 스토리지들에 대해서는 아래와 같이 설명한다.

세션 스토리지: 동기 방식으로 동작해 메인 스레드의 연산을 중단시키기 때문에 조심해야한다. 또한 탭 안에서만 유효해 웹 워커나 서비스워커가 접근할 수 없다.
로컬 스토리지: 세션 스토리지와 마찬가지로 동기방식으로 동작해 메인 스레드 연산을 중단시키고, 웹 워커나 서비스 워커가 접근할 수 없다.
쿠키: 쿠키는 쿠키 본연의 역할이 있어 스토리지도 사용하지 않는것이 좋으며, HTTP 요청마다 외부로 함께 전달되기 때문에 데이터를 조금만 저장해도 소모하는 전체 데이터 양이 늘어날 수 있다. 비동기로 동작하지만 웹 워커에서는 접근 할 수 없다고 한다.
WebSQL: WwbSQL은 위에서 언급했듯이 W3C에서 2010년에 스펙 관리를 중단했고, 최신의 브라우저들에서 지원이 중단되어 사용하면 안된다고 한다.

Firebase를 보다가 생긴 단순한 궁금증으로 생각보다 많은 자료들을 보게되었는데 백엔드 개발자를 희망하더라도 클라이언트 측 지식을 아는 것과 모르는것은 차이가 있을 것이라고 생각해 열심히 찾아봤다. 사실 이런 이유 아니여도 어차피 궁금해서 참지도 못했을거고.. 많은 도움을 받은 자료들과 작성자들에게 감사한 마음으로 링크를 남기고 끝!

참고자료
https://javascript.info/localstorage
https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage
https://medium.com/@lancelyao/browser-storage-local-storage-session-storage-cookie-indexeddb-and-websql-be6721ebe32a
https://han41858.tistory.com/54
https://web.dev/storage-for-the-web/
https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
https://developer.mozilla.org/ko/docs/Glossary/Browsing_context
https://github.com/whatwg/html/issues/2322
https://www.w3.org/html/wg/spec/browsers.html
https://somedaycode.github.io/develop/2021/03/12/cacheStorage/
http://www.whatarecookies.com/
https://so-so.dev/web/service-worker/
https://developer.mozilla.org/ko/docs/Web/API/Service_Worker_API