HTML, CSS, JavaScript로 작은 솔로 프로젝트를 하던 중 LocalStorage라는 개념을 알게 되었습니다. 프론트 엔드 영역을 개발한한 후 DB에 연결하지 않고 브라우저에 저장된 데이터를 이용하여 CRUD 구현이 가능했습니다. LocalStorage 오늘은 LocalStorage의 개념과 기본적인 사용법을 정리하고자 합니다.
LocalStorage의 특징
데이터를 로컬(브라우저)에 저장하는 할 수 있으며, 자바스크립트를 통해서 저장, 삭제 등이 가능하고 모바일 기기에서도 사용이 가능합니다.. Key값과 Value값을 세트로 저장하며, 도메인과 브라우저 별로 저장을 하기 때문에 같은 브라우저와 도메인으로 접속할 경우 영구적으로 데이터 저장이 가능합니다.
하지만 데이터 저장용량이 5MB이므로 너무 많은 데이터는 저장이 불가능합니다. 그리고 LocalStorage에는 문자열만 저장 가능하기 때문에 배열이나, 객체는 문자열로 변환하는 과정이 필요합니다.
setItem()
LocalStorage에 데이터를 저장합니다.
// PersonalInfo 라는 객체 데이터를 저장해 봅시다.
const PersonalInfo= {...Object}
// window.localStorage.setItem(key, value);
window.localStorage.setItem('info', JSON.stringify(PersonalInfo));
// 'info'라는 key 값으로 문자열 데이터 저장getItem()
getItem 메소드를 이용하여 저장된 되이터를 가져옵니다.
// window.localStorage.setItem(key);
let savedData = localStorage.getItem("info");
let Data = JSON.parse(savedData); // 문자열 데이터를 객체로 파싱removeItem()
LocalStorage에 저장된 데이터를 key 값을 통해 삭제합니다.
//window.localStorage.setItem(key);
window.localStorage.setItem('info'); // key가 'info'인 데이터 삭제clear()
LocalStorage에 저장된 모든 데이터를 삭제합니다.
window.localStorage.clear(); // 모든 데이터 삭제Cookie와 차이점
쿠키는 서버접속시에 자동적으로 송신되며 유효기간이 있는 반면 LocalStorage에는 유효기간이 없습니다.
SessionStorage와 차이점
LocalStorage와 사용방법은 같습니다. LocalStorage 같은 경우에는 세션이 끊겨도 사용이 가능하나 SessionStorage는 동인한 세션에서만 사용이 가능합니다.
정리
오늘은 LocalStorage의 사용법과 Cookie, SessionStorage와 차이점에 대해 간단하게 알아 보았습니다. 우리가 브라우저를 사용하면서 많이 들어본 Cooki, Session이 정확하게 무엇이고 어떻게 동작하는지에 대해서 다음 포스팅에서 정리하겠습니다.
