브라우저 저장소 차이점 ( Localstorage, SessionStorage, Cookie )

🔔 브라우저 저장소로 Cookie와 Web Storage가 있다

HTML5 에는 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인

Web Storage 스펙이 포함되어 있다. 

( Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다. )

더 쉽고 간단한 저장소 제공을 위해 새로운 localStorage와 sessionStorage API를 제공한다.

 

WebStorage의 특징

 - 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송은 이루어지지 않는다. 이것은 네트워크 트래픽 비용을 줄여 준다는 주요한 장점이 된다.

 - WebStorage는 용량의 제한이 없다.

 - 만료기간의 설정이 없다. 즉 한번 저장한 데이터는 영구적으로 존재하는 것이다. 

 - 데이터의 지속성과 관련하여 두 가지 용도의 저장소를 제공한다.

   (영구저장소(LocalStorage)와 임시저장소(SessionStorage))

둘 다 저장 공간으로 사용할 수 있는데 이 둘의 가장 큰 차이점이라면 저장소로서의 기능은 대부분 동일하며 단지 sessionStorage의 경우 세션이 종료되면 저장된 데이터도 함께 사라진 다는 점이 다른 점이다.

[ localStorage ]
 - 로컬에 도메인 별로 지속되는 storage
 - localStorage는 시간제한이 없고 브라우저가 꺼져도 죽지 않는다.
 - 값을 지우려면 직접 지워줘야한다.

[ sessionStorage ]
 - 세션이(프로세스, 탭, 브라우저) 종료될 때까지 지속되는 storage
 - 세션 스토리지는 localStorage와 쓰는 느낌이 비슷한데 커다란 차이점이 있다. 그것은 바로 소멸 타이밍이다.
 - localStorage는 소멸타이밍이 없다. 즉 직접 지워줘야한다. 그러나 sessionStorage는 세션의 종료시 죽음을 맞이한다. (난 세션이 끊기면 죽는다)

 

LocalStorage

LocalStorage는 저장한 데이터를 지우지 않는 이상 영구적으로 보관이 가능하다.

도메인마다 별도로 로컬 스토리지가 생성이 된다는 것이다. Windows 전역 객체의 LocalStorage라는 컬렉션을 통해 저장/조회가 이루어진다.

 

 - 브라우저를 종료해도 데이터는 보관되어 다음번 접속에도 그 데이터를 사용할 수 있다.

LocalStorage 저장/조회/삭제하는 법

localStorage.setItem("access_token", "user"); // 저장
localStorage.getItem("access_token"); // user
localStorage.removeItem("access_token");
localStorage.clear(); // 전체 삭제

 

---

SessionStorage

SessionStorage는 세션 종료 시(브라우저를 닫을 경우) 클라이언트에 대한 정보가 삭제된다.

SessionStorage는 windows 전역 객체의 SessionStorage라는 컬렉션을 통해 저장/조회가 이루어진다.

 

 - 데이터가 지속으로 보관되지 않는다. 이는 마치 브라우저 기반 세션 쿠키와 그 성질이 비슷한데, 현재 페이지가 브라우징 되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지된다.

 

그러나 sessionStorage에서 의미하는 세션은 가장 작은 단위인 탭단위를 의미한다.
탭마다 sessionStorage는 따로 배정되며 서로의 영역을 공유하지 않는다. 따라서 값을 침범할 수 도 없다.
​
그래서 sessionStorage는 더 각별하다.
cookie가 가졌던 근본적인 문제인 도메인 같으면 항상 쿠키를 보낸다는 조건이
sessionStorage를 통해 해소하려한 흔적이 보인다.

SessionStorage 저장/조회/삭제하는 법

sessionStorage.setItem("access_token", "User"); // 저장
sessionStorage.getItem("access_token"); // User
sessionStorage.removeItem("access_token")
sessionStorage.clear();

 

---

쿠키(Cookie) vs 로컬 스토리지 비교

쿠키는 서버측과 클라이언트측 양쪽에서 쿠키 데이터를 사용하는 api가 존재한다.

이와 달리 localStorage는 로컬 환경에서만 컨트롤된다.

 

쿠키와 달리 로컬(웹)스토리지는 자바스크립트 객체 자체를 넣는것 역시 가능하며

문자열에 크기제한이 있는 cookie에 비해서 비교우위를 가진다.

 

브라우저가 종료되면 자동으로 사라지는 쿠키를 재현하기 위해서 sessionStorage를 도입하였다.

sessionStorage의 존재로 세션이 유지되는 동안만 필요한 데이터를 저장할 수 있게 되었다.

 

​SessioniStorage는 데이터의 지속성과 액세스 범위에 특수한 제한이 존재한다.

도메인마다 별도로 생성되는 점은 LocalStorage와 같지만, 같은 사이트의 도메인이라도 브라우저가 다르면 서로 다른 영역이 된다. 이는 브라우저 컨텍스트가 다르기 때문이다.

 

또한 쿠키는 domain별로 데이터가 분리되지만 같은 브라우저라면 값을 공유했다.

sessionStorage는 다른 탭이라면 데이터가 공유도지 않는다.

만약 공유할 데이터는 localStorage에 넣으면 되므로 선택의 폭이 커졌다.

​

쿠키는 자신의 변화를 감지할 방법이 없다.

web storage는 자신의 변화를 이벤트로 감지할 수 있다.

 

결론

---

데이터의 지속성에 따라 선택.

 

📚참고/출처

---

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-localStorage-sessionStorage

https://velog.io/@design0728/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%A0%80%EC%9E%A5%EC%86%8C-LocalStorage-SessionStorage-Cookie