• Local Storage, Session Storage, Cookie 차이점
• Local Storage, Session Storage, Cookie 사용 예시 - 어떤 데이터를 어디에 저장하면 좋을까?
• Local Storage에 데이터를 저장하고, 저장한 데이터를 접근해서 가져오는 방법

대부분의 데이터는 데이터베이스에 저장하고 해당하는 사용처에 따라 쿠키, 세션스토리지, 로컬스토리지를 적절히 사용해야한다.
대부분 임시적인 용도의 데이터나 캐시, history,글 작성 중간에 임시로 글을 저장,
쇼핑몰의 장바구니, 좋아하는 콘텐츠(찜, 좋아요와 같은 기능들)등 수시로 변경되는 정보를 저장
방문자의 이동 경로를 저장하였다가 이동 시에 사용
-key: value쌍으로 데이터 저장, key값으로 호출
가장 중요한 것은 보안적인 문제가 될 만한 것들을 저장할 때 사용하면 안된다.

쿠키

브라우저 요청이 있을 경우 자동으로 서버에 전송한다.
사용자의 하드에 저장되어 보안위험이 있다.
같은 도메인 상에서 쿠키 값은 공유된다.
하나의 쿠키는 4KB까지 저장 가능하다.
key, value 데이터 파일로 이름, 값, 만료 날짜(저장 날짜), 경로 정보가 필요하다.

사용 사례
'오늘 팝업을 열지 않음'
장바구니
자동 로그인

https://okayoon.tistory.com/entry/%EC%BF%A0%ED%82%A4Cookie

스토리지

쿠키의 단점을 보완해서 만든 기술이다.
key, value로 이루어진 데이터 파일이다.
서버의 자원이 사용하므로 서버의 공간이 필요하다.
기기마다 차이는 있으나 모바일 2.5MB, 데스크탑 5MB~10MB정도 저장 가능하다.
쿠키 보다 보안이 우수하며 많은 정보를 담을 수 있다.
Local Storage, Session Storage로 나뉘며 데이터의 만료에 따라 나뉜다. (사용자가 데이터를 삭제하지 않는 한)
Local Storage = 만료기한 없음, Session Storage = 세션 종료 시 만료.

로컬 스토리지(Local Storage)

데이터의 만료기간이 없으며 사용자가 데이터를 지우지 않은 한 영구적으로 보존된다.
사이트 재 방문시 이전에 저장되었던 정보를 이용 할 수 있어 활용도가 높다.
사용자 설정 저장, 브라우저를 닫고 열었음에도 정보가 남아야 하는 것들을 저장할 때 사용한다.

예시: 구글메일에서 오프라인 메일 사용 체크 설정 변경(체크)
https://okayoon.tistory.com/entry/%EB%A1%9C%EC%BB%AC-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80Local-Storage

세션 스토리지(Session Storage)

데이터의 세션이 끝나면(브라우저 종료) 데이터가 지워진다.
휘발성 데이터를 저장할 때 사용한다.

예시: 뒤로가기 버튼

Web Storage의 차이점(cookie와 비교)

쿠키는 매번 서버로 전송된다.

웹 사이트에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키정보를 포함하여 서버로 전송된다. Web Storage는 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송은 이루어지지 않는다. 이는 네트워크 트래픽 비용을 줄여 준다.

단순 문자열을 넘어(스크립트) 객체정보를 저장할 수 있다.

문자열 기반 데이터 이외에 체계적으로 구조화된 객체를 저장할 수 있다는 것은 개발 편의성을 제공해주는 주요한 장점이 된다. 브라우저의 지원 여부를 확인해 봐야 하는 항목이다.

용량의 제한이 없다

쿠키는 개수와 용량에 있어 제한이 있다. 하나의 사이트에서 저장할 수 있는 최대 쿠키 수는 20개이다. 그리고 하나의 사이트에서 저장할 수 있는 최대 쿠키 크기는 4KB로 제한되어 있다. 그러나 Web Storage에는 이러한 제한이 없다. 그러나 쿠키도 하위키를 이용하면 이러한 제한을 일부 해소할 수 있습니다. 그리고 대부분 쿠키의 제한으로까지 데이터를 저장할 일이 없다.

영구 데이터 저장이 가능하다

쿠키는 만료일자를 지정하게 되어 있어 언젠가 제거된다. 만료일자로 지정된 날짜에 쿠키는 제거되는 것이다. 만약 만료일자를 지정하지 않으면 세션 쿠키가 된다. 만일 영구 쿠키를 원한다면 만료일자를 굉장히 멀게 설정하여 해결할 수 있다.
WebStorage는 만료기간의 설정이 없다. 즉, 한번 저장한 데이터는 영구적으로 존재하는 것이다.

WebStorage와 쿠키의 차이점에 대해서 WebStorage가 특별히 좋은 이유는 없다고 봐도 무방하다. 다만 한가지 매번 서버로 전송되지 않는다는 특징은 꽤나 유용하다.

LocalStorage와 SessionStorage

데이터 유지 측면

SessionStorage는 데이터가 지속적으로 보관되지 않는다. 이는 마치 브라우저 기반 세션 쿠키와 그 성질이 비슷한데, 현재 페이지가 브라우징되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지된다.

LocalStorage는 브라우저를 종료해도 데이터는 보관되어 다음번 접속에도 그 데이터를 사용할 수 있는 반면, SessionStorage는 브라우저가 종료되면 데이터도 같이 지워진다. 즉, 브라우저가 종료되면 SessionStorage도 삭제된다는 것이다.

데이터 범위 측면

SessionStorage 역시 Web Storage의 기본 보안 처럼 도메인별로 별도로 생성된다. 여기 더불어 SessionStorage는 같은 사이트의 같은 도메인이라 할지라도 브라우저가 다르면 서로 다른 영역이 된다. 브라우저 컨텍스트가 다르기 때문이다.

탭 브라우징이나 브라우저를 하나 더 실행해서 같은 페이지를 실행했을 때, 이 두 페이지의 SessionStorage는 각각 별개의 영역으로 서로 침범하지 못한다는 의미이다. 이는 도메인만 같으면 전역적으로 공유 가능한 LocalStorage와 구분되는 특징이다.

WebStorage의 보안은 서로 다른 도메인의 데이터 침범을 막고는 있지만 클라이언트, 즉 사용자를 막고 있지는 않다. 클라이언트는 얼마든지 저장된 값을 임의로 수정이 가능하다. 이것은 쿠키와 동일한 개념이다. 그렇다고 쿠키에 비해 별다른 보안 취약점을 더 가진 것은 아니다. 따라서 개발자는 사용자에 의한 이러한 임의 변경에 항상 예의 주시하고 방어 코드의 작성을 잊지 말

로컬 스토리지 불러오는 것.

다른거

Local Storage, Session Storage, Cookie 차이점
Web storage = html5에 새로 생긴 기능
서버 요청 시
쿠키 : 매 요청마다 전송
스토리지 : 자동 전송이 아닌 특정 시기 특정 요소만 전송
용량
쿠키 : 4kb
스토리지 : 5mb
데이터형
쿠키 : 문자열만 저장 가능
스토리지 : js 객체 저장 가능
데이터 전송
쿠키 : 모든 쿠키를 전송해야 함
스토리지 : 선별한 요소만 전송 가능
세션 정의
쿠키 : 같은 브라우저라면 다른 탭이나 새창도 같은 세션으로 정의
스토리지 : 같은 브라우저라도 가장 작은 단위인 탭만 달라도 다른 세션으로 정의
이벤트
쿠키 : 이벤트 감지 불가능
스토리지 : 이벤트 감지 가능
로컬과 세션의 차이
로컬은 js코드를 통해 삭제하지 않으면 반영구적으로 남는다.
세션 종료 시 세션 스토리지 데이터는 삭제된다.
Local Storage, Session Storage, Cookie 사용 예시
쿠키 : 브라우저 버전이 다양하여 호환성이 중요히 될 때
로컬 스토리지 : 보안에 민감하지 않은 유저 커스터마이징, 자동 로그인, 팝업창 다시 보지 않기
세션 스토리지 : 글 작성 도중 입력 폼, 장바구니, 일회성 로그인
접근
쿠키 : document.cookie
로컬 : window.localStorage
세션 : window.sessionStorage
setItem(키, 값) : 저장 (이미있으면 update)
getItem(키) : 조회
removeItem(키) : 삭제
clear() : 전체 삭제
key(n) : n번째 키의 이름 반환 (0부터 시작)