자바스크립트 웹 스토리지 사용법 (LocalStorage, SsesionStorage)

 

 

 

웹 스토리지(LocalStorage/SessionStorage)

 

 

웹 스토리지는 클라이언트(사용자)단 브라우저에 데이터를 저장할 수 있는 장소이며, DB에 저장할 만큼 중요한 데이터가 아닌 경우 웹 스토리지를 사용한다. 웹 스토리지에는 로컬스토리지, 세션스토리지 두 개로 나뉘어져 있다.

 

로컬스토리지(LocalStorage) : 해당 웹사이트를 새탭이나 새창으로 띄워도 동일한 데이터를 공유한다. 브라우저를 종료해도 데이터가 남아있으며, 직접 브라우저의 캐시삭제 및 로컬스토리지 초기화를 하지 않는 이상 데이터는 영구적으로 보관된다. 

 

세션스토리지(SessionStorage) : 웹페이지의 세션이 끝나면 데이터가 지워지며(브라우저 종료), 해당 웹사이트를 새탭이나 새창으로 띄울 경우 데이터가 서로 격리되어 저장된다. 

 

 

localStorage.setItem("key", value); // 로컬스토리지 데이터 저장

localStorage.getItem("key"); // 로컬스토리지 데이터 읽기

localStorage.removeItem("key"); // 로컬스토리지 데이터 삭제

localStorage.clear(); // 로컬스토리지 모든 데이터 삭제

for(let i=0 ; i<localStorage.length ; i++){ // 로컬스토리지 전체 데이터 출력
	
    console.log(
				localStorage.getItem(localStorage.key(i))
                );
}

 

sessionStorage는 localStorage를 대체해 사용하면 된다. 데이터 저장은 JSON 형태와 같이 키(key)와 값(value)으로 구분되어 저장된다. value에는 문자열과 배열까지 들어가며 객체는 저장되지 않는다. 

 

로컬스토리지에 객체를 저장하기 위해서는 로컬스토리지에 저장할 때는 JSON형식으로 저장하고 값을 불러와 사용할 때에는 JSON.parse()를 사용해 불러오면 된다.

 

 

JSON(JavaScript Object Notation) 사용하기