Cookie와 Local Storage, 그리고 Session Storage

Cookie와 Local Storage, 그리고 Session Storage...
이 세가지에 대해 알아보자.
이들은 브라우저에 데이터를 저장할 수 있는 공간들이다.

< Local Storage >

• 특징

• key/value 의 pair로 데이터를 저장한다.
• Javascript/HTML 을 통해서만 데이터에 접근 가능하다.
• no expiration date. 직접 지울때까지 남아있다.
• 5MB의 저장 공간을 가진다.
• Local Storage의 데이터는 api 호출에 담을 수 없어 서버에 전송이 불가능하다. (= client 에서만 저장 데이터 조회 가능)
• string data로 저장이 제한된다. 따라서 용이하게 사용하려면 직렬화(String화) 가 필요하다

< Session Storage >

• 특징

• session 기간에만 데이터를 저장한다. 즉, browser(또는 tab)이 꺼진다면 데이터는 소실된다.(보안 측면에서 유리)
• 5-10 MB의 저장 공간을 가진다
• Session Storage의 데이터는 api 호출에 담을 수 없어 서버에 전송이 불가능하다.(= client 에서만 저장 데이터 조회가능)
• 같은 주소의 URL의 창을 여러개 열어도 각각의 창은 별도의 Session Storage를 갖는다.

< Cookies >

• 특징

• expiration date는 각 데이터마다 설정된 기간동안으로 지정된다.
• 4KB 이하의 저장공간을 가진다.
• Server-Side에서 사용되는 데이터를 주로 저장한다.
• 매 api 요청마다 함께 전송된다.(header에 Access-Control-Allow-Credentials를 true로 설정 시)
• HttpOnly flag를 통해 각 Cookie를 client-side에서의 접근으로부터 보호할 수 있다. (document.cookie 로 직접 실험가능)