[Javascript] 로컬스토리지(Local Storage) 사용하기

로컬 스토리지(Local Storage)?

로컬 스토리지는 HTML5에서 브라우저에 추가된 저장소이다.

간단한 키와 값을 저장할 수 있고, 저장된 데이터는 사용자가 지우지 않는 이상

브라우저가 종료되어도계속 브라우저에 남아있다.

 

---

JS로 로컬 스토리지 사용하는 방법

// 데이터 저장하기 
localStorage.setItem(key, value);
// 데이터 불러오기
localStorage.getItem(key);
// 데이터 삭제 
localStorage.removeItem(key)
// 모든 것 삭제 
localStorage.clear() 
// index에 해당하는 키 소환 
localStorage.key(index) 
// 저장된 항목의 수 
localStorage.length

 

로컬 스토리지 데이터 저장하기

//localStorage.setItem(이름, 저장할 값)
localStorage.setItem('name', 'luka');

 

 

🔥 브라우저에서 로컬 스토리지 여는 방법🔥

 1. 크롬 개발자 도구 열기

 2. 애플리케이션 (Application)

 3. 로컬스토리지 클릭

 

저장된 키와 값을 확인할 수 있다.

 

 

로컬 스토리지 데이터 불러오기

//localStorage.getItem(이름);
localStorage.getItem('name');

데이터를 올바르게 호출하였다.