localStorage

localStorage는 HTML5 에서 추가된 저장소이며 간단한 key, value 를 저장할 수 있다. 값으로는 string, boolean, number, null, undefined를 저장할 수 있지만, 모두 문자열로 변환된다. 물론 key도 문자열로 변환된다. 객체 형태로 저장하려면 JSON.stringify 를 사용해서 문자열로 변환 후, 받을 때는 JSON.parse를 사용하여 객체 형태로 다시 되돌릴 수 있다.
localStorage는 유저가 데이터를 지우지 않는 한, 계속 유지되기 때문에 로그인시 아이디 기억, 자동로그인, 유저가 사이트에서 커스텀한 설정을 유지할 때 사용하기 좋다.

localStorage vs sessionStorage

localStorage와 sessionStorage 의 차이점은 데이터의 영구성이다. local의 경우에는 유저가 데이터를 지우지 않는 한, 계속 브라우저에 남아 있다. 하지만 seesion은 윈도우나 브라우저 탭을 닫은 경우에 사라진다(새로고침은 남아있음). 그러므로 지속적으로 필요한 데이터(자동로그인) 같은 경우는 로컬 스토리지에 저장하고 잠깐 동안 필요한 데이터(일반로그인)는 session에 저장하면 된다.

유저의 개인정보나 민감한 정보가 들어간 정보는 저장하면 안된다. 클라이언트 단에서 저장하는 것이기 때문에 언제든 조회하고 값을 변경할 수 있기 때문이다.

cookie

cookie는 local 이나 session 이전에 나온 브라우저 저장소이다. cookie는 만료 기한이 정해져있는 key, value의 저장소이다. cookie는 4kb의 용량 제한이 있으며 매번 서버에 요청을 보낼때 마다 cookie가 같이 전송이 된다. 왜 항상 cookie를 같이 보내게 될까?

cookie를 통한 데이터 통신

HTTP 요청은 상태를 가지고 있지 않다. 즉, 브라우저에서 서버로 유저의 정보를 가져온다는 가정하에 GET 요청을 보낼 때, 서버는 요청 자체만으로는 어느 유저로부터 그 요청이 오는지 알 수 없다. 그러므로 응답 또한 보내기 곤란하다. 이 때 cookie에 담겨진 유저의 정보를 담아서 서버에 보내면 서버는 cookie를 읽어서 어느 유저인지 판별하고 그에 맞는 데이터를 보내주는 것이다. cookie는 처음부터 서버-클라이언트 간의 지속적인 데이터 교환을 위해 만들어졌기 때문에 서버로 계속 cookie가 전송되는 것이다.

쿠키는 도메인에 따라 제한이 된다. 특정 사이트에서 보내진 쿠키는 다른 사이트에서 사용되지 않는다.

cookie의 문제점

만약 4kb 제한을 거의 다 채운 cookie가 있다면 요청을 할 때마다 매번 4kb정도의 데이터를 사용하는데, 이 중에는 서버에서 필요하지 않는 데이터도 있을 것이다. 이는 곧 데이터 낭비로 이어진다. 그러한 데이터들을 local이나 session에 저장하여 낭비를 막을 수 있다. 두 곳의 저장소는 서버로 자동으로 데이터가 전송되지 않기 때문이다.

왜 cookie가 있는데 웹 스토리지를 사용할까?

cookie를 웹 스토리지가 나오기 전부터 사용하고 있었는데, 왜 웹 스토리지(local, session)이 나왔을까?
1. cookie와 다르게 웹 스토리지는 서버로 데이터가 전송되지 않는다. 그리고 cookie보다 더 많은 데이터를 저장할 수 있다.(모바일: 2.5MB, PC: 5MB ~ 10MB) 또한 개발자가 웹 스토리지의 구성 방식을 설정할 수 있다.
2. 서버가 HTTP 헤더를 통해 웹 스토리지 객체를 조작할 수 없는 점이다. 웹 스토리지 객체의 조작은 전부 자바스크립트 내에서 실행된다.
3. 웹 스토리지 객체는 도메인, 프로토콜, 포트로 정의되는 origin에 묶여있다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다.