localStorage, sessionStorage vs Cookie 차이점 알아보기

[localStorage, sessionStorage 공통점]

이들의 공통점은 웹 스토리지라는 점이다. 클라이언트 단에서 데이터를 쉽게 관리할 수 있다는 장점이 있다. 따라서 중요한 정보인 경우는 웹 스토리지 사용을 지양한다. 

 

이둘은 key-value의 형식을 사용해 웹 스토리지에 저장할 수 있다. 또한 각각의 브라우저간의 데이터 공유는 불가능하다. 

예를 들어 크롬에서 저장한 데이터가 사파리에서 사용될 수는 없다. (당연한 말이다.)

 

1. key-value 형태로 저장이 된다.

2. 브라우저간의 데이터 공유는 불가능하다.

[localStorage 특징]

1. 브라우저가 닫혀도 localStorage에 저장된 값은 지워지지 않는다. (직접 지워야 한다.)

 

[sessionStoarge 특징]

1. 브라우저가 닫히며 sessionStorage에 저장된 값은 지워진다. (session이 종료됨에 따라 삭제된다.)

 

[Cookie, 웹 스토리지 차이점]

cookie는 서버측과 클라이언트측 양쪽에서 쿠키 데이터를 사용하는 api가 존재한다. 따라서 저장할 데이터의 쓰임이 양쪽 모두이냐를 고려해야하며 만약 서버쪽 사용이 필수적이고 잦다면 쿠키값을 사용하는 것이 효율적이다.

 

그리고 우리가 어떤 웹사이트에 들어가면 항상 보는 광고 7일 동안 보지 않기 역시 쿠기 기능이다.

왜냐하면 웹 스토리지에는 기간 기능이 없기 때문이다.

 

서버측과 사용이 잦은가?

-> 쿠키O, 웹 스토리지X

 

기간 설정이 필요한가?

-> 쿠기O, 웹 스토리지X

 

하지만 무작정 쿠키를 사용하면 좋지 않다. 쿠키는 데이터를 넘길 때 모든 쿠키를 전송해야 하기 때문에 http 통신에 부하를 줄 수 있다.

 

또한 쿠키는 문자열 형태만 전송이 가능하지만 웹 스토리지는 객체를 json형태로 변환하여 저장할 수 있다는 장점이 있다.