javascript의 Window.Storage를 사용해보자.

오늘은 개발하던도중 자바스크립트에 아주 유용한 기능 중 하나인 localStorage가 있어서 정리해보려고 한다.

최근에 사용자의 편의성을 위해서 특정작업 후에도 스크롤위치를 저장하기 위해서 localStorage를 사용해봤는데, 아주 유용한 것 같다. 일단 사용법이 간단하기도 하고, 브라우저 호환성도 괜찮은 것 같다. (IE 8도 지원하니까 뭐..)

일단 사용법 부터 설명하면 다음과 같다. (정말 별게없다)

// 로컬스토리지 사용법(브라우저가 닫혀도 유지)
function test() {
 
  localStorage.setItem('key', 'value'); // 키 : 밸류 값으로 저장한다
 
  console.log(localStorage.getItem('key')); // 콘솔에 value가 출력
 
  localStorage.removeItem('key'); // key값에 해당하는 로컬스토리지 저장소의 값을 삭제
 
  localStorage.clear(); // 로컬스토리지 내 저장된 값을 모두 삭제
  
}
 
// 세션스토리지(브라우저가 닫히거나, 1시간이 지나면 삭제가됨)
function session() {
 
  //사용법은 로컬스토리지와 동일
  sessionStorage.setItem('key', 'value'); 
  console.log(sessionStorage.getItem('key')); 
  sessionStorage.removeItem('key');
  sessionStorage.clear();
  
}

위와 같이 사용하면 되고, 스크롤저장, 메뉴펼침 닫힘 저장 등 사용방법은 여러가지가 있을 수 있겠다. 

또 공식문서에 내가 설명한 것 보다 더 잘설명되있기 때문에 공식문서를 확인하는 것도 좋은 공부가 될 것 같다.

Web Storage API

이것으로 오늘 정리는 끝!