로컬스트로지, 세션스토리지

로컬 스토리지와 세션 스토리지는 HTML5에서 추가된 저장소

• 간단한 키와 값을 저장할 수 있다. 키-밸류 스토리지의 형태
• 로컬 스토리지와 세션 스토리지의 차이점은 데이터의 영구성
• 로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있음
• 하지만 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거
• 지속적으로 필요한 데이터(자동 로그인 등)는 로컬 스토리지에 저장
• 잠깐 동안 필요한 정보(일회성 로그인 정보라든가)는 세션 스토리지에 저장! 
• 하지만 비밀번호같은 중요한 정보는 절대 저장 금지! 클라이언트에 저장하는 것이기 때문에 언제든지 털릴 수 있음

 

로컬 스토리지(localStorage)

로컬 스토리지는 window.localStorage에 위치합니다. 키 밸류 저장소이기 때문에 키와 밸류를 순서대로 저장하면 됩니다. 값으로는 문자열, 불린, 숫자, null, undefined 등을 저장할 수 있지만, 모두 문자열로 변환됩니다. 키도 문자열로 변환됩니다.

localStorage.setItem('name', 'zerocho');
localStorage.setItem('birth', 1994);
localStorage.getItem('name'); // zerocho
localStorage.getItem('birth'); // 1994 (문자열)
localStorage.removeItem('birth');
localStorage.getItem('birth'); // null (삭제됨)
localStorage.clear(); // 전체 삭제

메소드를 간단히 설명하자면, localStorage.setItem(키, 값)으로 로컬스토리지에 저장한 후, localStorage.getItem(키)로 조회하면 됩니다. localStorage.removeItem(키)하면 해당 키가 지워지고, localStorage.clear()하면 스토리지 전체가 비워집니다.

localStorage.setItem('object', { a: 'b' });
localStorage.getItem('object'); // [object Object]

객체는 제대로 저장되지 않고 toString 메소드가 호출된 형태로 저장됩니다. [object 생성자]형으로 저장되는 거죠. 객체를 저장하려면 두 가지 방법이 있습니다. 그냥 키-값 형식으로 풀어서 여러 개를 저장할 수도 있습니다.

• 한 번에 한 객체를 통째로 저장하려면 JSON.stringify를 해야됩니다.
• 객체 형식 그대로 문자열로 변환하는 거죠. 받을 때는 JSON.parse하면 됩니다.

localStorage.setItem('object', JSON.stringify({ a: 'b' }));
JSON.parse(localStorage.getItem('object')); // { a: 'b' }

이렇게 데이터가 지우기 전까지는 계속 저장되어 있기 때문에 유저 커스터마이제이션에 좋을 것 같습니다. 사용자의 설정(보안에 민감하지 않은)이나 데이터들을 넣어두면 됩니다.

세션 스토리지(sessionStorage)

세션 스토리지는 window.sessionStorage에 위치합니다. clear, getItem, setItem, removeItem, key 등 모든 메소드가 같습니다. 단지 로컬스토리지와는 다르게 데이터가 영구적으로 보관되지는 않을 뿐입니다.

 

출처

https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048

(HTML&DOM) 로컬스토리지, 세션스토리지 - 그리고 쿠키

https://racoonlotty.tistory.com/entry/%EC%BF%A0%ED%82%A4%EC%99%80-%EC%84%B8%EC%85%98-%EA%B7%B8%EB%A6%AC%EA%B3%A0-%EB%A1%9C%EC%BB%AC-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80%EC%99%80-%EC%84%B8%EC%85%98-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80

쿠키와 세션 그리고 로컬 스토리지와 세션 스토리지