웹 스토리지의 차이점 (쿠키 vs 로컬스토리지 vs 세션스토리지)

📃웹 스토리지의 차이점 (쿠키 vs 로컬스토리지 vs 세션스토리지)

 

📌 우선 웹스토리지를 간단하게 알아볼까요? 

웹 스토리지는 쿠키와 비슷하게 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트에 저장 할 수 있도록 하는 기능

---

📌 쿠키 

쿠키를 사용하는 이유는 HTTP 요청은 상태를 가지고 있지 않기 때문이다.(Stateless)

이 말은 브라우저에서는 서버에 요청을 보낼 때 그 요청 자체로는 그 요청이 누구에게서 오는지 알 수 없고, 쿠키에 정보를 담아서 보내면 서버는 쿠키를 통해 파악할 수 있게된다

 

ex) 이전에 쇼핑에서 로그인을 해야만 장바구니 정보가 저장되었다면, 요즘은 비로그인 상태에서도 일정기간 쿠리를 통해 정보를 유지할 수 있게 됨! ( 자사몰 개발 할 때 참고하면 좋은 부분인거 같음!)

 

또한 쿠키를 통해 사용자별의 정보를 분석 할 수 있어 요즘에는 더욱 중요한 개념이 되었다

 

쿠키의 단점

장기간 유지되고 브라우저 종료 후에도 유지되는 Persistent Cookie의 경우 사용자의 하드디스크에 저장된다. 그렇기 때문에 공공 PC의 경우는 쿠키를 탈취하여 개인정보를 빼돌릴 수도 있다. 이러한 보안상 취약점이 있고, 네트워크를 통해 암호화되지 않는 쿠키를 전송할 때 쿠키 정보를 탈취하는 스니핑(Sniffing) 공격에 당할 수 도 있다.

 

---

📌 웹스토리지

웹스토리지는 HTML5에서 쿠키의 단점을 보완해서 만든 기술이다.

쿠키와 달리, 서버에 전송되지 않고 필요한 경우에만 꺼내 쓰는 것으로 자동 전송의 위험성이 적다!

또한, 꺼내 쓰고 싶어도 도메인 단위로 접근이 제한되는 특성 때문에 값을 꺼내 쓸 수 없다

 

쿠키와 다르게 유효기간이 존재하지 않고 대략 5MB까지 데이터를 저장 할 수 있다고 한다 

다만, HTML5를 지원하지 않는 브라우저에서는 사용 할수 없음 

 

웹스토리지는 로컬VS 세션 두가지로 나눌 수 있는데 가장 큰 차이점은 데이터의 영구성이다!

 

🟢로컬스토리지 

✔️브라우저를 종료해도 유지되는 데이터로, 명시적으로 지우지 않는 한 영구적으로 저장

✔️서로 다른 브라우저 탭이라도 동일한 도메인이라면 동일한 로컬 스토리지를 사용한다.

✔️지속적으로 필요한 정보를 저장하기에 좋다. (ex. 자동 로그인 등)

 

🟢세션 스토리지 (Session Storage)

✔️세션 쿠키와 달리, 탭/윈도우 단위로 세션 스토리지가 생성됨 

    즉 window 객체와 동일한 유효 범위 및 생존 기간을 가지며, 탭/윈도우를 닫을 시 데이터가 삭제된다.

✔️동일한 탭/윈도우라도 다른 도메인이라면 또 다른 세션 스토리지가 생성

✔️잠시 동안 필요한 정보를 저장하기에 좋다. (ex. 입력 폼 저장, 일회성 로그인 등)

 

 

 

참조

https://velog.io/@dorazi/%EC%BF%A0%ED%82%A4-%EC%9B%B9-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-%EB%A1%9C%EC%BB%AC-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-%EC%84%B8%EC%85%98-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80

쿠키, 웹 스토리지 (로컬 스토리지, 세션 스토리지)

https://kadamon.tistory.com/8

쿠키 vs 로컬스토리지 vs 세션스토리지