Cookie Vs Local Storage VS Session Storage

Cookie Vs Local Storage VS Session Storage

---

일반적으로 브라우저에 데이터를 저장할 수 있는 3개의 공간이 있다 

Cookie

Local Storage

Session Storage

---

Cookie(특징)

• expiration date는 각 데이터마다 설정된 기간동안으로 지정된다.
• 4KB 이하의 저정공간을 가진다.
• Server-Side에서 사용되는 데이터를 주로 저장한다.
• 매 api 요청마다 함께 전송된다.(header에 Access-Control-Allow-Credentials를 true로 설정 시)
• HttpOnly flag를 통해 각 Cookie를 client-side에서의 접근으로부터 보호할 수 있다. 
• 방문 사이트에서 로그인 시, "아이디와 비밀번호를 저장하시겠습니까?" 팝업창 등 있다
• 쇼핑몰의 장바구니 기능
• 자동로그인, 팝업에서 "오늘 더 이상 이 창을 보지 않음" 체크 하는 팝업창

 

Session Storage(특징)

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

Local Storage(특징)

• key/value 의 pair로 데이터를 저장한다.
• Javascript/HTML 을 통해서만 데이터에 접근 가능하다.
• no expiration date. 직접 지울때까지 남아있다.
• 5MB의 저장 공간을 가진다
• Local Storage의 데이터는 api 호출에 담을 수 없어 서버에 전송이 불가능하다.  client 에서만 저장 데이터 조회 

---

정리

---

데이터 베이스를 사용하지 않고 데이터를 임시적으로 저장할때 사용하는 것

대부분 임시적인 용도의 데이터나 캐시.history 기능을 위해 사용

방문자의 이동경로를 저장하였다가 이동 시에 사용

보안적인 문제가 될 만한 것들을 저장할 때 사용하면 안된다

글 작성 중간에 임시로 글을 저장하는 용도로도 많이 사용된다