웹 스토리지 localStorage, sessionStorage, cookie 비교

로컬 스토리지 ( localStorage )

서버가 아닌 브라우저에 데이터를 저장하여 서버에 불필요하게 데이터를 저장하지 않을 수 있다.

로컬 스토리지 저장용량

Opera -> 5MB

Safari -> 5MB

FireFox -> 10MB

Chrome -> 출처 당 10MB

Internet Explorer -> 저장 영역 당 5MB

localStorage, sessionStorage, cookie 중 저장 용량 한도가 제일 크다.

데이터를 브라우저에 반영구적으로 저장하며 브라우저를 닫더라도 데이터가 유지된다. 하지만 도메인(domain)이 다른경우에는 로컬 스토리지에 접근할 수 없다. (google.com에 저장한 localstorage를 naver.com에서 사용할 수없다.)

localStorage는 key와 value 값을 받는데 key 값은 호출할 때 사용되며 value 값을 반환한다.

* 값을 저장할 때 데이터 타입과 상관없이 무조건 문자열로 변환되어 저장되며, 값을 반환하는 경우에도 value 값은 문자열(String)이다.

추가적으로 알아두면 좋을만한 점은

객체를 저장하게되면 "[Object Object]"와 같은 형식으로 저장되는데 값을 출력해보면 데이터 값이 아닌 "[Object Object]"가 그대로 출력되어 객체를 정상적으로 사용할 수 없다.

그러므로 로컬 스토리지에 객체를 저장할때는 객체를 문자열로 바꿔 저장해야하며

문자열로 바뀐 객체를 가져와서 사용하고자 할때는 다시 객체로 바꾸어 사용해야 원래 객체를 정상적으로 사용할 수 있다.

// 객체를 문자열로 변환

JSON.stringify();

// 문자열로 변환된 객체를 다시 원래 객체로 변환

JSON.parse();

- 로컬스토리지에서 사용되는 메서드 -

//로컬 스토리지에 정보를 저장

localStorage.setItem(key, value)

//로컬 스토리지에 저장된 정보를 출력

localStorage.getItem(key)

setItem 과 getItem 이외에도 clear, removeItem, key, length 등의 내장 메서드가 존재한다.

세션 스토리지 ( sessionStorage )

세션 스토리지에 데이터를 저장한다.

로컬 스토리지와 마찬가지로 데이터가 서버로 전송되지 않는다.

브라우저 또는 탭이 닫힐 때까지만 데이터가 저장된다. (브라우저 또는 탭이 닫히면 데이터 삭제)

세션 스토리지도 로컬 스토리지와 동일한 내장 메서드를 사용한다.

쿠키 ( cookie )

후속 요청으로 서버로 다시 보내야하는 데이터를 저장한다. 즉, 쿠키는 매번 서버로 전송된다.

데이터 만료 기간은 유형에 따라 다르며 서버 측 또는 클라이언트 측에서 설정할 수 있다. (일반적으로 서버측에서 결정)

로컬 스토리지 ( localStorage ) 와 세션 스토리지 ( sessionStorage ) 는 클라이언트 측에서만 읽을 수 있지만 

쿠키는 주로 서버측에서 읽기위한 것이며 서버측에서 읽을 수 있다.(자바스크립트로도 조작이 가능하긴 하다.)

또한 쿠키 하나가 차지하는 용량은 최대 4KB 까지이며 사이트 하나당 약 20여개의 쿠키를 허용한다.(브라우저별로 상이하다.)

앞서 말했듯이 자바스크립트로도 쿠키가 조작이 가능하다. 그래서 XSS 공격과 같은 보안적인 문제가 있을 수 있기 때문에 쿠키에 대해서 httpOnly 플래그를 true로 설정하면 쿠키를 안전하게 만들 수 있다. 이렇게 설정하면 오직 HTTP 통신을 통해서만 쿠키가 전송된다.

 또한 Secure 옵션을 작성하게 되면 쿠키는 HTTPS 통신으로만 전송되기 때문에 더욱 보안 수준을 높여줄 수 있다.

document.cookie()

document.cookie 로 쿠키에 접근할 수 있다.