웹 저장소 종류 및 특징

local storage

setItem("key", "value")
getItem("key")
removeItem("key")
clear()

localStorage.setItem('myCat', 'Tom');  #항목 추가
const cat = localStorage.getItem('myCat');   #항목 읽기

• 로컬 저장 공간에 접근할 수 있는 Storage 객체
• 단순 키밸류 저장소 기능
• 최대용량 제한 5mb - 10mb
• key, value 는 str 타입만 지원
• 만료기간 없이 데이터 저장
• localStorage에 저장한 자료는 페이지 프로토콜별로 구분
• HTTP(http://example.com)로 방문한 페이지에서 저장한 데이터는 같은 페이지의 HTTPS(https://example.com)와는 다른 localStorage에 저장
• 정보를 클라이언트 측에 저장하려면 Modern APIs의 종류인 웹 스토리지 API (localStorage와 sessionStorage) 와 IndexedDB를 사용

Session Storage

setItem("key", "value")
getItem("key")
removeItem("key")
clear()

• Api사용 방법은 local과 동일
• 브라우저 열거나 새탭열때 초기화, 그러나 새로고침 시에는 데이터 유지
• 글 작성사이트같은 곳에서 자동 임시저장 용도 적합

Indexed DB

• 사용자의 브라우저에 데이터를 영구적으로 저장할 수 있는 방법 중 하나
• 네트워크 상태에 상관없이 풍부한 쿼리 기능을 이용
• 대용량 데이터 저장
• 저수준 api 까다로운 사용으로 본격적으로 데이터 저장할 시에 적합

Cookie

Set-Cookie: <cookie-name>=<cookie-value>

HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry

[page content]

< cookie-name >=< cookie-value > 이름-값 쌍의 목록. 목록 내 쌍들은 세미콜록과 공백('; ')으로 구분하여
쿠키 설정

• Cookie HTTP 요청 헤더는 Set-Cookie 헤더와 함께 서버에 의해 이전에 전송되어 저장된 HTTP cookies를 포함
• 저장용량 4kb
• Cookie 헤더는 선택적, 만약 브라우저의 사생활 보호 설정이 쿠키를 block할 경우 생략
• 서버데이터 공유 용도
• 데이터 유효기간 지정 가능, 특정 도메인 혹은 경로 제한을 설정 가능,쿠키가 보내지는 것을 제한할 수 있음
• 웹프론트 개발시 서버사이드렌더링 시 중요]
• 쿠키에 미리 필요한 데이터를 저장하여 서버에서 html렌더링 시에 많은 정보 전달 -> 로딩시간 단축
• 세션쿠키, 보안쿠키, 영구쿠키 등 필요에 따라 사용

-세션쿠키
웹 사이트를 탐색하는 동안 임시 메모리에만 존재

-영구쿠키
생성자가 설정 한 영구 쿠키의 수명 동안 사용자가 자신이 속한 웹 사이트를 방문 할 때마다 또는 사용자가 다른 웹 사이트에서 해당 웹 사이트에 속한 리소스 (예 : 광고)를 볼 때마다 정보가 서버로 전송

광고주가 장기간에 걸쳐 사용자의 웹 검색 습관에 대한 정보를 기록하는 데 사용할 수 있기 때문에 추적 쿠키라고함

-보안쿠키
보안 쿠키 만 암호화 된 연결을 통해 전송 될 수있다 (즉, HTTPS ). 암호화되지 않은 연결 (예 : HTTP )을 통해 전송할 수 없음

-HTTP 전용 쿠키
HTTP 전용 쿠키는 같은 클라이언트 측 API를 액세스 할 수 없음
크로스 사이트 스크립팅 (XSS)을 통한 쿠키 도난 위협을 제거
그러나 XST ( 교차 사이트 추적 ) 및 CSRF ( 교차 사이트 요청 위조 ) 공격에 여전히 취약

참고 사이트
https://en.wikipedia.org/wiki/Main_Page
https://developer.mozilla.org/ko/docs/Mozilla