[Web]Local storage 와 Session storage

Web storage란?

HTML5는 데이터를 클라이언트에 저장할 수 있는 web storage를 제공한다. 이전에는 쿠키에 데이터를 저장해지만 쿠키의 단점을 극복할 개선점들이 담겨있다.
key-value형태로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다.
그리고 크게 local strage와 session storage로 나눌수 있다.

Cookie와의 차이점은?

1. cookie(용량,시간, 갯수 제한) Web Stroage(용량제한)
2. cookie(시간제한 설정 가능) Web Storage(시간제한 설정 불가능)
3. cookie(문자열만 저장 가능) Web Storage(Javascript 객체 저장 가능)
4. cookie(서버에 모든 쿠키 전송해야함 그에 따른 side effect 존재)
   Web Storage(개발자가 선택해서 보낼 수 있고 가공도 가능)
5. cookie(같은 브라우저면 탭이 달라도 같은 세션)
   Web Storage(같은 브라우저라도 탭이 다르면 다른 세션)
6. cookie(이벤트 없음) Web Storage(이벤트 존재)

Local storage

• 명시적으로 저장된 데이터를 지우지 않는 이상 영구적으로 저장이 가능한다. 도메인 마다 별도의 local storage가 생성된다.
• 브라우저를 종료해도 다음번 접속 때 사용이 가능하다.

Session storage

• 데이터가 지속적으로 저장되지 않는다. 현재 브라우징되고 있는 브라우저에서만 유지된다.
• 브라우저가 종료되면 해당 session storage도 같이 지워진다.

Cookie, Web Storage 모두 다른 도메인의 침범은 막지만 클라이언트(사용자)는 막지않는다. 즉, 클라이언트가 언제든지 저장된 값을 임의의로 수정할 수 있다.

참고)
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

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