찰떡개발자 코딩

항상 정리해놓자 정리해놓자 하면서 아무렇지 않게 사용했던 것들에 대해 정리 해볼예정이다.

웹개발자라면 빼놓을 수 없는 Storage와 Cookie에 대해 정리해놓으려고 한다.

이것이 어떤것인지, 왜 사용하는지, 어디에 사용하는지, 어떤 차이가 있는지 간단하게 정리해놓으려고한다.

1). Web Storage

• 웹 스토리지 (web storage)는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 기능이다. 웹 스토리지와 쿠키의 기능 자체는 유사하지만, 쿠키는 약 4KB까지 밖에 저장 공간을 이용하지 못하는 반면에 웹 스토리지는 약 5MB까지 저장 공간을 이용할 수 있다.
• 웹 스토리지에는 Local Storage와 Session Storage가 있다. 
• 웹 스토리지는 서버로 저장된 데이터를 전송하지 않지만, 쿠키는 모든요청이 있을 때마다 요청과 함께 서버로 전송된다.
• 도메인 단위 접근 => 도메인이 다를경우 해당 스토리지에 접근하지 못한다. (당연한 얘기..)
• 브라우저 내에 키-값 쌍으로 데이터를 저장할 수 있다.

※하위 2개의 Storage에서 제공하는 공통 Method 및 Property

// 키에 데이터 쓰기
localStorage.setItem("key", value)

// 키로 부터 데이터 읽기
localStorage.getItem("key")

// 키의 데이터 삭제
localStorage.removeItem("key")

// 모든 키의 데이터 삭제
localStorage.clear()

// 저장된 키/값 쌍의 개수
localStorage.length

//인덱스(index)에 해당하는 키 조회
localStorage.key()

1-1). Local Storage

• 특징 : 
  • 데이터를 명시적으로 삭제하지 않는 한 영구적으로 보관된다. (브라우저 화면을 끄거나 컴퓨터 전원을 껐다 켜도 내용이 항상 저장되어 있다.)
  • Windows 전역 객체의 LocalStorage라는 컬렉션을 통해 저장과 조회가 이루어진다
  • 5MB/10MB
  • XSS에 취약
• 사용 :
  • 읽은 글에 대한 기록 참조를 위해 목록기록.
  • 간단한 이미지나 텍스트 파일 등과 같은 파일 정보를 스트링으로 변환하여 저장하하여 사용
  • 글쓰기를 하다가 저장하지 못했는데 인터넷이 끊기에 되는 경우 로컬에 자동 저장 기능 등등

1-2). Session Storage

• 특징 :
  • 세션 스토리지는 각 세션마다 데이터가 개별적으로 저장된다. (브라우저에서 여러개의 탭을 실행하면 탭마다 개별적으로 데이터가 저장됨)
  • windows 전역 객체의 sessionStorage라는 컬렉션을 통해 저장과 조회가 이루어진다
  • 새로고침을 했을 때나 화면이 넘어갔을 때는 정보가 남아있지만, 해당 창이나 컴퓨터를 껐다 켰을 때는 정보가 사라진다.

• 사용 : 
  • 쇼핑몰의 쇼핑정보
  • 다국어 설정 Locale 등등
  • 좋아하는 콘텐츠(찜, 좋아요와 같은 기능들)
  • 5MB
  • XSS에 취약

2). Cookie

• 특징 : 
  • 브라우저 요청이 있을 경우 자동으로 서버에 전송한다.
  • 같은 도메인 상에서 쿠키 값은 공유된다.
  • 하나의 쿠키는 4KB까지 저장 가능하다.
  • 클라이언트에서 해당 쿠키를 볼수 있으므로 보안성이 낮다.
  • 4KB
  • CSRF에 취약

• 사용 : 
  • 필수적인 쿠키 : 페이지 탐색, 웹 사이트 보안 영역 접속, 기본 기능 활성화
  • 기능 쿠키 : 접속자의 지역, 언어 등
  • 성능 쿠키 : 정보의 익명 수집, 보고
  • 마케팅 쿠키 : 방문 내역 추적

localStorage.setItem(Key,value);
localStorage.getItem(key);
localStorage.removeItem(key);
localStorage.clear() – 전체 삭제
localStorage.key(index) – 인덱스(index)에 해당하는 키를 꺼내온다.
localStorage.length – 저장된 항목의 개수


sessionStorage.setItem(Key,value);
sessionStorage.getItem(key);
sessionStorage.removeItem(key);
sessionStorage.clear() – 전체 삭제
sessionStorage.key(index) – 인덱스(index)에 해당하는 키를 꺼내온다.
sessionStorage.length – 저장된 항목의 개수