LocalStorage & SessionStorage & Cookie

LocalStorage

• local 브라우져에서 데이터를 저장할수 있는 저장소로 HTML5표준부터 새롭게 추가된 저장소.
• key:value 조합 형태로 저장되며, 이때 value는 무조건String형태로 들어간다.(숫자나 boolean형태의 값도 String으로 들어가며, value에 object객체를 넣을떄 [object][object] 형태로 들어가있는것을 확인할수 있음.)
• 브라우져가 종료 후에도 storage값은 남아있으며, 직접 삭제하거나 clean하지않는이상 계속 남아있음(크롬의 시크릿 창 열기등 에서 생성된 localstorage는 종료후 삭제 됨)

SessionStorage

• localStorage과 똑같이 저장되며, 관리되는 저장소이지만, 브라우져 종료시 스토리지는 전부 삭제 처리됨.
• 저장공간은 브라우져별로 다르겠지만 최대 5MB정도임.
• 사용법은 localStorage와 같음.

Web Storage 사용법

/**key이름을 가진 item값을 Storage에 넣음*/
localStorage(sessionStorage).setItem(key,value); 
/**key이름을 가진 item값을 리턴함.*/
localStorage(sessionStorage).getItem(key);
/**key이름을 가진 item값을 삭제*/
localStorage(sessionStorage).removeItem(key); 
/** Storage 내용 전부 삭제*/
localStorage(sessionStorage).clear() 

Cookie

• 쿠키는 웹사이트 접속시 서버가 응답헤더에 값을 넣어 전달하면(Set-Cookie) 브라우져에서 string 형태로 클라이언트가 저장하는 값을 말함.
• 서버에서 브라우져로 응답헤더에 쿠키를 리턴하는것은 일회성이지만, 브라우져에서 서버로부터 요청할때마다 쿠키 헤더로 지속적으로 넘어가는 특징이 있음.
• key=value 형태를 지니는 문자열로 구성되어있으며 ; 구분자를 통해 최대 4kb까지 전송이 가능하며(encodeURIComponent), 도메인당 쿠키는 최대 20여개 까지 저장이 가능.
• 쿠키는 유효일자(expires)이나 만료기간(max-age)를 지정하지않으면 쿠키도 session처럼 브라우져 종료시 같이 삭제가 됨.(둘다 있을떄는 max-age속성이 우선순위.)
• 쿠키의 단점
  1. 유실되기쉽다.
     • 브라우져에서 일괄 삭제하거나 하드디스크에 저장되어있는 쿠키를 삭제하기가 쉽다.
  2. 변조되기 쉽다.
     • 브라우져의 개발자도구를 통한 클라이언트로에서 쿠키 조작이 가능.
  3. 도난의 가능성
     • 브라우져에서 자바스크립트 코드를 심어서 서버로 요청하기 이전에 스크립트를 통해 쿠키값을 도난할수 있음.
• 유실과 변조를 막기위해 보안속성인 HttpOnly속성을 추가하여 자바스크립트에서 해당 쿠키를 제어할수 없게 할수 있음.
• 도난의 가능성을 막기 위해 Secure속성을 추가하여 프로토콜이 https인 경우에만 서버로 돌려 보내게 설정 할수 있음.

참고

• 쿠키와 document.cookie
• 쿠키 1부: HTTP로 설명하는 쿠키(cookie)
• Web Storage API