브라우저에 데이터를 저장하는 방법
인터넷 연결은 불안정하며 언제든 끊어질 수 있다.
그래서 오프라인에서도 동작하며 불안정한 상황을 안정되게 유지하기 위해 PWA(Progressive Web App)를 사용하기도 한다.
연결이 완벽한 무선 환경에서도 캐시나 스토리지 기술을 적절하게 활용하면 사용자가 느끼는 앱 성능을 향상시킬 수 있다.
애플리케이션 정적 리소스(HTML, JavaScript, CSS, 이미지 등)나 데이터(사용자 데이터, 기사 글 등)를 캐싱하는 방법은 다양하다
리소스를 저장할 때 추천 하는 방법
- 캐시 스토리지 API(Cache Storage API)
- 네트워크로 불러온 리소스나 파일을 캐싱할때
- 캐시 스토리지 API는 서비스 워커(Service Worker)가 제공하는 기능 중 하나
- IndexedDB
- 위의 경우가 아닐 때 활용
- IndexedDB를 프라미스(Promise) 형태로 랩핑한 라이브러리도 있다
최근 브라우저들은 IndexedDB와 캐시 스토리지 API를 모두 지원한다.
이 스토리지들은 모두 비동기(asynchronous)로 동작하기 때문에 메인 스레드 연산에 영향을 주지 않는다. 그리고 window 객체로 접근할 수 있으며 웹 워커나 서비스 워커에서도 접근할 수 있기 때문에 자유롭게 활용할 수 있다.
웹 스토리지 (Web Storage)
- 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능
- 기존 쿠키(cookie)의 문제점을 극복하기 위해 웹 브라우저가 직접 데이터(data)를 저장할 수 있게 해준다 - 웹 스토리지는 최소 5MB 이상의 많은 공간을 가지고 있으며, 이 정보는 절대 서버로 전송되지 않는다
- 사용자 측에서 좀 더 많은 양의 정보를 안전하게 저장할 수 있도록 해준다 - 웹 스토리지는 오리진(origin)마다 단 하나씩만 존재
* 오리진(origin) : 도메인(domain)과 프로토콜(protocol)의 한 쌍으로 이루어진 식별자 - 하나의 오리진에 속하는 모든 웹 페이지는 같은 데이터(data)를 저장하며 또한 같은 데이터에 접근할 수 있다
- 웹 스토리지는 로컬 스토리지 ( Local Storage ) 와 세션 스토리지 ( Session Storage ) 로 나눌 수 있다
로컬 스토리지 vs 세션 스토리지
로컬 스토리지 는 브라우저를 종료해도 데이터를 보관(영구성)한다.
또한, 도메인만 같으면 전역적으로 데이터가 공유되는 특성을 가지고 있다.
하지만, 세션 스토리지는 브라우저가 종료되면 데이터가 삭제(비영구성)된다. 도메인이 같더라도 브라우저가 다르면 ( 탭 브라우저, 다른 브라우저 ) 브라우저 컨택스트가 다르기 때문에 각각의 세션 스토리지가 형성되어 데이터 공유가 되지 않는다
참고 링크
https://untitledtblog.tistory.com/47
https://han41858.tistory.com/54
https://ryuhojin.tistory.com/10?category=1050330
http://www.tcpschool.com/html/html5_api_webStorage
