js localstorage 사용

프로젝트 개발시 화면 이동시에 데이터를 영구저장이 필요할 때가 있습니다.

 

이처럼 일정 시간 또는 영구적으로 값을 저장하고 싶은 경우에 사용할 수 있는 것이 WebStorage API인 로컬 스토리지(LocalStorage)가 있습니다.

 

localstorage란?

・데이터를 사용자 로컬에 보존하는 방식.
・데이터를 저장, 덮어쓰기, 삭제 등 조작 가능.
・자바스크립트(JavaScript)로 조작.
・모바일에서도 사용 가능

쿠키와 차이점

・유효 기간이 없고 영구적으로 이용 가능
・5MB까지 사용 가능 (쿠키는 4KB까지)
・필요할 때 언제든 사용 가능 (쿠키는 서버 접속시에 자동 송신)

localstorage 기본 구성

・키(key)와 값(value)을 하나의 세트로 저장.
・도메인과 브라우저별로 저장.
・값은 반드시 문자열로 저장됨.

 

사용방법

let moive = localStorage.getItem('myMovie'); //조회 
localStorage.setItem('myMovie', 'Gun'); //추가 
localStorage.removeItem('myMovie'); //삭제 
localStorage.clear(); // 전체삭제

모든 key와 value는 항상 string으로 저장됩니다. (object와 integer는 string으로 자동 변환됩니다.)

키-값으로 저장되며 페이지로드를 통해 새로고침, 재접속 후에도 유지됩니다. 

Storage.getItem(), Storage.setItem() 메소드를 사용하여 액세스 할 수 있습니다.