로컬 스토리지와 세션 스토리지는 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) 로컬스토리지, 세션스토리지 - 그리고 쿠키
안녕하세요. 이번 시간에는 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)에 대해 알아보겠습니다. 이름만 봐도 각각의 기능이 뭔지 대충 알겠죠? 영어에 약하신 분들을 위해 간단히 설
www.zerocho.com
쿠키와 세션 그리고 로컬 스토리지와 세션 스토리지
쿠키 쿠키는 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일. document.cookie하면 현재 쿠키 정보가 나옴. 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효 시간
racoonlotty.tistory.com