TIL 12 day local storage, cookie, session storage

Winney·2020년 9월 10일

TIL local storage session storage storage

Web Storage 웹 저장소

웹 저장소가 나오기 전에는 주로 쿠키를 사용했다. 하지만 HTML5가 웹 저장소를 새롭게 제공하면서 웹 저장소인 로컬 스토리지(local storage)와 세션 스토리지(session storage)를 사용 할 수 있게 되었다.

Local Storage 로컬 스토리지

로컬 스토리지는 클라이언트측 컴퓨터에 데이터를 저장하는 방법이다. 도메인과 브라우저별로 저장된다. 데이터는 키-값(key-value) 형태로 저장이 되며 저장 기한은 영구적이다. 그렇기에 사용자가 조작을 해야만 로컬 스토리지에 저장된 데이터를 지울 수 있고 보안상의 위험이 있다.
로컬 스토리지는 HTML5와 JavaScript를 통해서만 접근가능하다. 모바일에서도 사용 가능하다.

특징

영구적
5MB의 저장공간
데이터가 서버로 전송되지 않음
일반적인 텍스트(plaintext) 형태로 보안상의 위험이 있음
문자열 데이터로만 저장되기 때문에 직렬화(serialized) 해야한다.
클라이언트 측에서만 읽을 수 있음

session storage

세션 스토리지는 세션에 대한 데이터만 저장한다. 즉, 데이터는 브라우저나 탭을 닫을 때까지만 저장되며 브라우저가 열려있는 한 페이지를 새로고침해도 세션은 계속 유지된다. 로컬 스토리지와 마찬가지로 키-값 형태로 저장된다. 세션 스토리지도 로컬 브라우저에 저장되며 클라이언트 측에서만 읽을 수 있다. 데이터는 서버로 전송되지 않는다.

특징

영구적이지 않다. 브라우저를 닫을 때까지 저장된다.
5-10MB의 저장공간
동일한 URL로 여러 탭과 창을 열면 각 탭과 창에 따른 세션 스토리지가 생성된다.
클라이언트 측에서만 읽을 수 있다.

Web Storage가 나오기 전에 주로 사용되던 방법이다. 후속 XHR 요청을 사용해 서버로 다시 전송해야하는 데이터를 저장한다. 데이터 저장 만료기간은 유형에 따라 다르며 서버나 클라이언트측에서 설정 할 수 있다. 서버측에서도 데이터를 읽을 수 있다. 쿠키는 httpOnly flage를 true로 설정함으로서 안전하게 만들 수 있다. 이는 클라이언트 측에서 쿠키로 접근하는 것을 예방한다. 쿠키는 업데이트 가능하다.