자바스크립트 로컬스토리지 사용법 localStorage ( javascript localStorage )

1. window.localStorage 개념

 

 - key-value 형식으로 저장되며 쿠키를 사용하는 것보다 훨씬 직관적으로 설계되었습니다.

 - 저장된 데이터는 브라우저 세션으로 공유됩니다.

 

 

2. localStorage와 sessionStorage 차이점 

 

 localStorage는 브라우저 창이 닫힌 후에도 유지가 되지만 sessionStorage는 닫힌 후에는 유지되지 못합니다.

 

 

3. localStorage 저장 경로

 

  Goole Chrome에서 웹 스토리지 데이터는 사용자 프로필의 하위 폴더에 있는 SQLite파일에 저장됩니다.

 

 - Windows :  \AppData\Local\Google\Chrome\User Data\Default\Local

 - MacOS : ~/Library/Application Support/Google/Chrome/$PROFILE/Local Storage

 

 

4. localStorage 주요 기능

 

 - setItem( key, value ) : key와 value 추가

 - getItem( key ) : setItem을 이용해 지정된 key로 접근하여 아이템을 획득 ( 데이터 접근 ) 

 - removeItem( key ) : setItem을 이용해 지정된 key로 접근하여 아이템을 제거

 - clear() : 모두 지우기

 - key( index ) : index로 Key 이름을 반환

 

 

5. localStorage 사용법

 

 

데이터 추가

localStorage.setItem('myCat', 'Tom');

 

 

데이터 읽기

const cat = localStorage.getItem('myCat');

 

 

데이터 제거

Key 이름이 전달되면 메소드는 해당 Key가 있는 경우 저장소에서 해당 키를 제거합니다. 지정된 Key와 연결된 항목이

없으면 아무 작업도 수행하지 않습니다.

localStorage.removeItem('myCat');

 

 

전체 제거

이 메소드를 호출하면 해당 도메인에 대한 모든 레코드의 전체 저장소가 지워집니다.

localStorage.clear();

 

Key 이름 얻기

 

var KeyName = window.localStorage.key(index);

 

 

6. localStorage 사용시 주의점 및 한계

 

 - 정보가 브라우저에 저장이 되므로 민감한 정보를 저장하지 마십시오.

 - 모든 주요 브라우저에서 5MB로 제한됩니다.

 - 데이터 보호 형식이 없고 웹 페이지의 모든 코드에서 접근할 수 있으므로 매우 안전하지 않습니다.

 - 동기식 방식이여서 호출된 작업이 차례로 실행됩니다.