Local Storage, Session Storage 사용하기

휘발성이 강한 데이터나 임시적으로 저장해야 하는 데이터를 서버에 계속해서 저장하게 되면 불필요한 서버통신을 계속해서 해야 합니다.

 

Local Storage와 Session Storage를 사용하면 위와 같은 데이터들을 관리할 수 있습니다.

 

Local Storage

---

특징

• 데이터를 사용자 로컬에 저장합니다.
• js로 저장, 삭제 등 조작이 가능합니다.
• 최대 5mb까지 사용 가능합니다.
• 도메인과 브라우저별로 저장됩니다.
• 값은 문자열로 저장됩니다.
• key, value로 저장되어야 합니다.
• 여러 탭/창이 있을 경우 서로 데이터가 공유됩니다.

활용

// 데이터 저장
localStorage.setItem( "dataName", --- );

// 데이터 가져오기
let localData = localStorage.getItem("dataName");

// 특정 데이터 삭제
localStorage.removeItem('dataName');

// 전체 데이터 삭제
localStorage.clear();

object 형식 저장 시 JSON.stringify와 JSON.parse를 사용하시면 됩니다.

 

 

Session Storage

---

세션스토리지는 로컬스로리지와 똑같은 방식으로 활용합니다.

차이점이 있다면 얼마나 오래 보존되느냐입니다.

 

• 세션스토리지는 세션이 끝날 때 삭제됩니다.
• 로컬스토리지는 세션이 끝나도 삭제되지 않습니다.