Cookie/WebStorage (Local/Session Storage)차이

Web Storage란?

Web Storage는 2016년부터 실제로 쓰이게 되었으며 브라우저에 매우 종속된 기술이라고 볼 수 있다.

브라우저(클라이언트)에 key-value형태로 데이터를 저장 하는 방식으로 쿠키와 굉장히 유사하다

쿠키와 Web Storage의 차이는 밑에서 보기로 하고 일단 Web Storage에는 Local Storage, Session Storage의 2가지 저장소가 분리되어있다. 

 

 

 

Local Storage

• localStorage는 시간제한이 없고 브라우저가 꺼져도 죽지 않는다. (브라우저를 종료하고 나중에 다시 접속해도 값이 유지가됨)
• 관리자가 데이터를 명시적으로 삭제 시켜줘야만 데이터 삭제가 된다. 
• 탭을 여러개 열어도 공유된다

localStorage의 내장함수

 

Session Storage

• 브라우저가 열려있는 동안만 데이터가 살아있으며 브라우저 종료시에 데이터도 함께 없어진다.
• 새로고침을 해도 데이터는 유지된다.
• 탭마다 별도의 저장소가 분리 되어 있어 데이터를 공유하지 않는다

sessionStorage의 내장함수

 

 

Local Storage , Session Storage의 차이

Local storage와 Session Storage의 가장 큰 차이는 브라우저 종료시 데이터가 사라지냐 이다.

Local Staroage는 관리자가 별도로 데이터를 삭제 해 주지않는 이상 데이터를 계속 가지고 있으며 Session Storage는 브라우저 종료시 데이터가 사라지는 것을 볼 수있다!

 

 

 

Cookie와 WebStorage의 차이

 

1.제한

cookie - 용량제한, 시간제한, 갯수제한 존재

webstorage - 용량제한만 존재

 

2.시간제한 설정

cookie - 시간제한 설정가능

webstorage - 시간제한 설정 불가능

 

3.데이터형

cookie - 문자열만 저장가능

webstorage - javascript 객체 저장가능

 

4.데이터 전송

cookie - 모든 쿠키를 전송해야함, cookie를 가공함으로써 발생하는 side effect존재

webstorage - 개발자가 선택해서 전송할 수 있고 가공할 수도 있음

 

5.세션의 정의

cookie - 같은 브라우저면 다른 탭이나 다른 창(프로세스)일지라도 같은 세션이라고 정의

webstorage - 같은 브라우저일지라도 sessionStorage의 경우 다른 탭이면 다른 세션이라고 정의

 

6.이벤트

cookie - 이벤트 없음

webstroage - 이벤트 존재

 

쿠키와 비교해서 WebStroage가 더 나은 모습을 보이지만 데이터의 영속성 때문에 유지보수,데이터관리를 함에 있어 조금 더 까다로운점이 존재한다.

 

 

마지막으로 글을 조금 더 보태자면 세션은 이러한 클라이언트에서 데이터를 보관하는 방법보다 더 안전한 방법이다.

하지만 서버에 걸리는 부하때문에 cookie와 webstorage같은 곳으로 데이터를 분산한다.

 

 

참고 자료

https://velog.io/@ejchaid/localstorage-sessionstorage-cookie%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

[web] LocalStorage, SessionStorage, Cookie의 차이점

https://kamang-it.tistory.com/entry/Web%EC%A1%B0%EA%B8%88-%EB%8D%94-%EC%9E%90%EC%84%B8%ED%9E%88cookie%EB%8A%94-%EB%84%88%EB%AC%B4-%EA%B5%AC%EC%8B%9D%EC%95%84%EB%83%90-%EC%9D%B4%EC%A0%9C%EB%B6%80%ED%84%B4-Web-Storage

[Web][조금 더 자세히]cookie는 너무 구식아냐? 이제부턴 Web Storage!