스토리지가 필요한 이유
새로고침을 하게되면 JS파일을 처음부터 다시 랜더링 하기 때문에
모든 state 데이터는 리셋된다
만약 새로고침을 하더라도 데이터가 유지되게 하려면 로컬스토리지에 저장하는 방법이 있다
LocalStorage에 저장하는 방법을 비롯하여 스토리지의 차이점을 아라보자
먼저 데이터를 저정하는곳은 Web Storage 와 cookie로 나눠서 확인할 수 있다.
Web Storage
사이트와 관련된 데이터를 서버 또는 DB가 아닌 브라우저에 저장할 수 있게 해주는 기능이다
데이터의 저장은 object형태인 key : value 형태로 저장되며,
key를 이용해서 value를 확인할 수 있다
영구저장소(LocalStorage) 와 임시저장소(SessionStorage) 를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능하다.
LocalStorage
저장범위 : 도메인 / 브라우저
삭제시기 : 직접 삭제
사이트마다 5MB 정도의 텍스트,숫자 데이터를 저장할 수 있다
유저가 삭제를 하지 않는 이상 영구적으로 남아있다
아래와 같은 메서드를 이용해서 추가/읽기/삭제 가 가능하다
localStorage.setItem('데이터이름', '데이터'); //추가
localStorage.getItem('데이터이름'); //읽기
localStorage.removeItem('데이터이름'); //삭제object/array 저장
localStorage에는 문자열 자료만 저장할 수 있기 때문에 object/array 자료형의 데이터는 바로 저장할 수 없다
저장하려면 아래와 같이JSON.stringify 메서드를 이용해서 저장해야 한다.
localStorage.setItem('obj',JSON.stringify({name:'kim'}) ); // "{"name":"kim"}"
var a = localStorage.getItem('obj');
var b = JSON.parse(a)하지만 데이터를 다시 꺼내면 JSON 그대로 나와서 오브젝트처럼 자료조작이 불가능하기때문에 JSON을 오브젝트로 바꿔주는 함수인 JSON.parse()를 사용해야한다
SessionStorage
저장범위 : 도메인 / 브라우저 / 탭
삭제시기 : 탭 종료시
Cookie
브라우저에 저장되는 작은 크기의 문자열(최대 4KB)
서버에서 쿠키를 저장할 수 있기 때문에 쿠키는 서버에서 주로 사용된다
http요청시 헤더스에 실려서 서버로 전송되는 특징이있다
이때 같은 도메인에서 만들어진 쿠키만 전송하게 된다
Expires 또는 Max-Age를 통해 만료기간을 정할 수도 있다
- 영구쿠키 : 만료기간을 정한 쿠키
브라우저를 종료해도 기간이 끝나지않으면 삭제되지 않는다
- 세션쿠키 : 만료기간을 정하지 않은 쿠키
브라우저를 종료하면 바로 삭제된다
보안상의 문제
[cookie]
-
XSS
HttpOnly 옵션을 적용하면 javascript로 쿠키에 접근이 불가하기 때문에 해결 가능하다 -
CSRF
SameSite 옵션을 적용하면 같은 도메인에서의 요청이 아닌 경우에 쿠키를 전송하지 않는다
[web storage]
- XSS
innerHTML 을 사용해서 코드를 삭제하지 않는것이 좋다
공격이 가능한 script태그등이 삽입이 가능해지기 때문에
사용자의입력이 javascript 코드로 실행될 수도 작성하지 않는것이 좋다
정리
로컬스토리지를 사용해야 할 때
브라우저를 종료했어도 유지되어야 할 때 사용한다
ex) 다크모드 적용 등
세션스토리지를 사용해야 할 때
탭을 종료했을 때 삭제해도 괜찮은 데이터들을 저장한다
ex)이전페이지, 이전 스크롤 위치
쿠키를 사용해야 할 때
기간을 설정해야하거나, 자동으로 서버로 전송되어야 하는 작은 용량의 데이터인 경우에 사용할 수 있다
ex) n일동안 보지않기
참고한 사이트
(1) https://www.youtube.com/watch?v=GihQAC1I39Q&t=13s
(2) https://www.youtube.com/watch?v=-4ZsGy1LOiE
(3) https://velog.io/@design0728/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%A0%80%EC%9E%A5%EC%86%8C-LocalStorage-SessionStorage-Cookie
