LocalStorage vs SessionStorage vs Cookie

 

공부하기 위해 미디엄에서 잘 정리된 글을 번역하면서 공부 목적으로 작성하였습니다.

 

https://krishankantsinghal.medium.com/local-storage-vs-session-storage-vs-cookie-22655ff75a8

Local Storage vs Session Storage vs Cookie

 

 

HTML5의 출현으로, 클라이언트 브라우저에 정보를 담거나 캐시를 할 수 있는 다양한 옵션을 갖게 되었습니다. 기존에는 제한적이고 사이즈가 굉장히 작은 쿠키만 가지고 있었습니다. 지금은 로컬 스토리지와 세션 스토리지도 사용합니다. 

 

로컬 스토리지 

 

로컬스토리지는 클라이언트 컴퓨터에 데이터를 쌓는 한 방법입니다. 키/값 한 쌍을 만료기한 없이 웹 브라우저에 저장할 수 있게 해줍니다. 로컬스토리지는 자바스크립트와 HTML5를 통해서만 접근이 가능합니다. 그러나 사용자는 브라우저 데이터/캐시와 모든 로컬 스토리지 데이터를 지울 수 있습니다.

 

• 저장되는 데이터는 만료기간이 따로 없습니다.
• 스토리지 제한이 대략 5MB입니다.
• 데이터가 서버로 절대 이동되지 않습니다.
• 플레인 텍스트입니다. 설계적으로 안전적이지 않습니다.
• 문자열 데이터로 한정되있고, 직렬화가 될 필요가 있습니다.
• 클라이언트 사이드에서만 읽을 수 있습니다.

 

세션 스토리지 

• 세션에 대해서만 데이터를 저장합니다. 즉, 브라우저 혹은 탭이 닫히기 전까지만 데이터를 저장하고 있습니다.
• 데이터가 서버로 절대 이동되지 않습니다.
• 클라이언트 사이드에서만 읽을 수 있습니다.
• 스토리지 제한이 대략 5-10MB
• 같은 URL을 사진 탭/브라우저를 여러개 열어도 각 다른 세션 스토리지를 생성합니다. 

 

쿠키

• 후속 XHR 요청과 함께 서버로 다시 전송해야 하는 데이터를 저장합니다. 만료 기간은 타입에 따라 다르며 만료 기간은 서버 사이드 또는 클라이언트 측에서 설정할 수 있습니다.
• 쿠키들은 주로 서버 사이드에서 데이터를 읽기 위해서 사용한다. 로컬,세션 스토리지는 클라이언트 사이드에서만 읽을 수 있기 때문이다.
• 사이즈는 4KB 이하여야 합니다.
• 쿠키에 대해 httpOnly 플래그를 true로 설정하여 해당 쿠키를 안전하게 만들 수 있습니다. 이렇게 하면 해당 쿠키에 대한 클라이언트 측 액세스가 금지됩니다.

 

 

표로 정리한다면 

기능	쿠키	로컬스토리지	세션스토리지
최대 데이터 사이즈	4KB	5MB	5MB
사용자들에 의한 차단 가능 여부	YES	YES	YES
자동 만료  옵션	YES	NO	NO
지원하는 데이터 타입	문자열만 가능	문자열만 가능	문자열만 가능
브라우저 지원	Very High	Very High	Very High
서버 사이드 접근성	YES	NO	NO
데이터가 모든 HTTP 요청에 전달	YES	NO	NO
사용자들에 의한 수정 가능 여부	YES	YES	YES
SSL 지원 여부	YES	N/A	N/A
접근 가능한 사이드	서버 사이드 & 클라이언트 사이드	클라이언트 사이드에서만	클라이언트 사이드만
삭제 및 정리	PHP, JS & Automatic	JS only	JS & Automatic
라이프타임	명시된 대로	삭제될 때까지	탭이 닫힐때까지
데이터 스토리지 안정성	NO	NO	NO