Local Storage, Session Storage, Cookie

프론트엔드 개발에서 화면 이동을 할때 데이터를 어디에 잠시 저장해놓고 다른 화면으로 이동할때 꺼내서 사용할 일이 생긴다. 이때 사용하는 것이 로컬,세션 스토리지이다. 좀 더 자세히 정리해보자.

목차

1. 로컬 스토리지 개념 및 활용
2. 세션 스토리지 개념 및 활용
3. 쿠키와의 차이

1. 로컬 스토리지 개념 및 활용

로컬 스토리지는 서버에 필요하지 않은 데이터들을 영구적으로 저장할 때 사용하는 저장소이다. 브라우저를 닫아도 로컬 스토리지에 저장된 데이터는 제거되지 않는다.

2. 세션 스토리지 개념 및 활용

세션 스토리지는 서버에 필요하지 않은 데이터를 임시적으로 저장할 때 사용하는 저장소이다. 세션 스토리지에 있는 데이터들은 브라우저를 닫으면 제거되는 특성을 가진다.

 

3. 쿠키와의 차이

브라우저 측에 저장해놓고 사용한다니 어째 비슷한 역할을 하는 녀석이 생각난다. 바로 쿠키인데 이 녀석도 클라이언트 측에서 저장되며 브라우저가 종료되더라도 만료기간동안 사용할 수 있다는 특징을 가진다.
쿠키가 있는데 로컬 스토리지와 세션 스토리지가 필요한 이유가 뭘까?

쿠키가 있는데도 로컬,세션 스토리지가 필요한 이유는 서버에 보낼 필요가 없는 데이터를 따로 보관할 저장소가 필요하기 때문이다.
쿠키는 서버에 요청을 보낼 때마다 같이 전송되는데, 프론트엔드 쪽에서만 활용하고 서버에서는 활용되지 않는 데이터를 쿠키에 저장하게 되면 비효율이 발생한다.
이러한 문제를 해결하기 위해 프론트에서만 사용되는 데이터는 쿠키가 아닌 로컬,세션 스토리지에 저장을 해놓고 사용한다.

요약

로컬 스토리지는 서버에 전송할 필요없는 데이터를 영구적으로 저장하는 저장소이고, 세션 스토리지는 임시적으로 저장하는 저장소이다. 프론트엔드에서만 활용되는 데이터를 저장해놓는 저장소라고 이해하면 되겠다.