[Javascript]Web Storage(Cookie, Local, Session)

 

데이터를 저장할 수 있는 것이 오직 서버만인 것은 아닙니다.

HTML5에서 Web Storage API를 제공하여 쿠키를 사용하지 않고도 직관적인 key : value 형식의 데이터를 저장 및 사용할 수 있게 해줍니다. (쿠키도 key : valye 형식을 갖습니다)

이번 블로그에서는 Cookie와 Localstorage, Session Storage의 저장소로서의 개념과 특성에 대해 알아보겠습니다.

 

---

! 쿠키(Cookie)란?

쿠키는 웹사이트 접속지 접속자의 개인 장치에 다운되고 브라우저에도 저장되는 작은 텍스트 파일입니다.

서버를 통해 이용자의 설정과 과거 이용내역에 대한 일부 정보를 갖고 있습니다.

HTTP요청을 흘때 서버는 요청자체만으로 누구에게 오는지 알 수가 없기에 쿠키를 읽어 나를 파악할 수 있습니다.

즉, 서버에 요청을 할 때 마다 쿠키데이터가 전송이 됩니다. 

만약 쿠키의 용량인 4kb를 모두 채웠다면 매 요청 마다 4kb 중 필요없는 데이터들을 전송하게 됩니다.

 

■ 장점

   -클라이언트에 저장되어 서버의 저장공간 절약

   -HTTP의 상태유지 기능을 도와줌

■ 단점

   -보안에 취약

   -적은 용량(max 4KB)

   -네트워크 부하(쿠키가 클수록 네트워크 부하가 커질 수 있음)

   -만료기간이 있음

 

 

! Local Storage && Session Storage?

로컬 스토리지와 세션 스토리지는 HTML5에서 추가된 저장소 입니다.

마찬가지로 key : value 형태의 스토리지 형태로 매우 직관적인 모습을 갖고 있습니다.

두 저장소의 가장 큰 차이점은 데이터의 영구성입니다.

로컬 스토리지는 사용자가 일부로 지우지 않는 이상 계속 브라우저에 남아 있지만, 

세션 스토리지는 브라우저나 윈도우를 닫을 경우 사라지게 됩니다.

 

따라서 자동 로그인과 같은 지속적으로 필요한 데이터는 로컬 스토리지에,

일회성 로그인, 잠깐 사용하는 동안의 필요한 데이터는 세션 스토리지가 적합하다고 생각합니다.