TIL 12 day local storage, cookie, session storage

winney_77·2020년 9월 10일
2
post-thumbnail

Web Storage 웹 저장소

웹 저장소가 나오기 전에는 주로 쿠키를 사용했다. 하지만 HTML5가 웹 저장소를 새롭게 제공하면서 웹 저장소인 로컬 스토리지(local storage)와 세션 스토리지(session storage)를 사용 할 수 있게 되었다.

Local Storage 로컬 스토리지

로컬 스토리지는 클라이언트측 컴퓨터에 데이터를 저장하는 방법이다. 도메인과 브라우저별로 저장된다. 데이터는 키-값(key-value) 형태로 저장이 되며 저장 기한은 영구적이다. 그렇기에 사용자가 조작을 해야만 로컬 스토리지에 저장된 데이터를 지울 수 있고 보안상의 위험이 있다.
로컬 스토리지는 HTML5와 JavaScript를 통해서만 접근가능하다. 모바일에서도 사용 가능하다.

특징

  • 영구적
  • 5MB의 저장공간
  • 데이터가 서버로 전송되지 않음
  • 일반적인 텍스트(plaintext) 형태로 보안상의 위험이 있음
  • 문자열 데이터로만 저장되기 때문에 직렬화(serialized) 해야한다.
  • 클라이언트 측에서만 읽을 수 있음

session storage

세션 스토리지는 세션에 대한 데이터만 저장한다. 즉, 데이터는 브라우저나 탭을 닫을 때까지만 저장되며 브라우저가 열려있는 한 페이지를 새로고침해도 세션은 계속 유지된다. 로컬 스토리지와 마찬가지로 키-값 형태로 저장된다. 세션 스토리지도 로컬 브라우저에 저장되며 클라이언트 측에서만 읽을 수 있다. 데이터는 서버로 전송되지 않는다.

특징

  • 영구적이지 않다. 브라우저를 닫을 때까지 저장된다.
  • 5-10MB의 저장공간
  • 동일한 URL로 여러 탭과 창을 열면 각 탭과 창에 따른 세션 스토리지가 생성된다.
  • 클라이언트 측에서만 읽을 수 있다.

Web Storage가 나오기 전에 주로 사용되던 방법이다. 후속 XHR 요청을 사용해 서버로 다시 전송해야하는 데이터를 저장한다. 데이터 저장 만료기간은 유형에 따라 다르며 서버나 클라이언트측에서 설정 할 수 있다. 서버측에서도 데이터를 읽을 수 있다. 쿠키는 httpOnly flage를 true로 설정함으로서 안전하게 만들 수 있다. 이는 클라이언트 측에서 쿠키로 접근하는 것을 예방한다. 쿠키는 업데이트 가능하다.

특징

  • 다시 서버로 보낼 재사용 할 데이터를 저장
  • 저장 기한은 제각각임.
  • 서버와 클라이언트측 모두 데이터를 읽을 수 있다. (read only)
  • 4KB이하의 저장공간
  • 보안상 클라이언트측에서 쿠키 접근을 막을 수 있다.

출처

  • https://medium.com/@krishankantsinghal/local-storage-vs-session-storage-vs-cookie-22655ff75a8
  • https://junspapa-itdev.tistory.com/38
  • https://webisfree.com/2016-06-24/[%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8]-localstorage-sessionstorage-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8%EC%97%90-%EC%A0%95%EB%B3%B4-%EC%A0%80%EC%9E%A5
  • https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048
  • https://ponyozzang.tistory.com/341
  • https://ko.javascript.info/localstorage
profile
프론트엔드 엔지니어

0개의 댓글