⚡ 로컬 스토리지
로컬 스토리지는 HTML5에 추가된 저장소를 말하게 된다고 한다. 간단한 키와 값을 저장할 수 있으며 스토리지는 Key-Value 형태를 갖는다고 한다. 로컬 스토리지는 사용자가 데이터를 지우지 않는 한 브라우저에 계속 남아있게 됨으로 지속적으로 필요한 데이터는 로컬 스토리지에 저장하게 된다. 하지만 절대 비밀번호 같은 중요한 정보는 담아서는 안된다. 보안에 취약하기 때문이다. 로컬 스토리지는 쿠키의 단점을 보완하기 위해 탄생했다고 한다.
🖥️ 세션 스토리지
세션 스토리지는 HTML5에 추가된 저장소를 말하게 된다고 한다. 세션 스토리지 역시 간단한 키와 값을 저장할 수 있으며 스토리지는 Key-Value 형태를 갖는다고 한다. 로컬 스토리지와의 차이점으로는 윈도우나 브라우저 탭을 닫을 경우 데이터가 제거되는 형식이라고 한다. 그래서 잠깐동안 필요한 정보를 세션 스토리지에 저장하게 된다. 하지만 절대 비밀번호 같은 중요한 정보는 담아서는 안된다. 보안에 취약하기 때문이다. 세션 스토리지 역시 쿠키의 단점을 보완하기 위해 탄생했다고 볼 수 있다.
🍪️ 쿠키
스토리지 이전에 저장소로는 쿠키가 있다. 쿠키는 만료 기한이 있는 저장소로, 용량 제한이 있는 저장소이며 매 서버 요청마다 서버로 쿠키가 같이 전송되게 된다고 한다. 쿠키는 대부분의 브라우저가 지원한다는 장점이 있는데 그만큼 단점도 많다고 한다. 가령 매 HTTP마다 요청에 쿠키가 포함되어 API 호출로 서버에 부담을 안겨주고 쿠키의 용량이 4KB로 작다는것 역시 문제가 된다고 한다. 또한 쿠키는 암호화가 존재하지 않아 사용자의 정보 보안에 취약하다는 단점이 있다.
이처럼 다양한 유형의 데이터들이 각각 저장소에 보관 되게 되는데 각각은 어떤 형식으로 저장하면 좋을까?
자동 로그인등 꾸준히 저장소에 데이터를 담겨져 있어야 하는 것들은 로컬 스토리지에 담기는 것이 좋다. 그리고 순간적인 입력에만 필요한 입력 폼들은 세션 스토리지에 담기는 것이 좋을 것이다. 또 우리가 로그인을 하지 않아도 장바구니에 데이터를 담을 수 있는 이유 역시 세션 스토리지에 데이터가 담기기 때문에 가능한 것이다! 그리고 다시 보지 않을 팝업 창 등은 쿠키에 담아 만료 기한을 정해서 보관하는 것이 좀더 브라우저를 깨끗하게 쓰고 보안을 지킬 수 있을 것 같다.
참고자료
https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048
