1. Session Storage, Local Storage, Cookie
Session Storage와 Local Storage는 HTML5에서 추가된 저장소로
간단한 키와 값을 저장할 수 있다.
이 둘이 나오기 전에는 Cookie를 주로 사용했다.
쿠키에도 데이터 저장이 가능하고, 저장된 데이터로 백엔드와 통신할 수도 있다.
2. 특징
로컬 스토리지와 세션 스토리지의 차이점은 데이터의 영구성이다.
로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아있다.
하지만 세션 스토리지의 데이터는 윈도우나 브라우저의 탭을 닫으면 사라진다.
따라서 지속적으로 필요한 데이터(자동 로그인 정보)는 로컬 스토리지에 저장하고,
잠깐 동안 필요한 정보(일회성 로그인 정보)는 세션 스토리지에 저장하면 된다.
여기서 로컬 스토리지는 데이터를 쉽게 볼 수있기에 중요한 데이터를 로컬 스토리지에 넣는 방법은
보안상 좋지않은 방법이다.
쿠키는 만료시간을 정할 수 있고, 만료시간이 지나면 사라진다.
3. Local Storage, Session Storage 사용법
로컬 스토리지는 key, value 저장소이기 때문에 key와 value를 순서대로 저장하면 된다.
값으로는 문자열, boolean, 숫자, null, undefined등을 저장할 수 있지만
모두 문자열로 바뀌어 저장된다.
사용법은 간단하다.
localStorage.setItem(키, 값)으로 데이터를 저장하고,
localStorage.getItem(키)으로 조회하면 된다.
localStorage.removeItem(키)으로 해당 키의 데이터를 삭제하며,
localStoarge.clear(으로 스토리지 전체를 비울 수있다.
로컬 스토리지와 세션스토리지는 데이터 보관방식만 다를 뿐 사용하는 메서드는 동일하다.
