오늘은 localStorage와 sessionStorage의 차이점을 알아보고 localStorage에 접근해 저장된 값을 가져오는 방법에 대해 정리해본다.
sessionStorage는 브라우저 탭이 열려 있는 동안만 유효하다. 따라서 창을 닫거나 종료 시에는 저장된 값이 사라진다.
반면에 localStorage는 계속 값이 저장된다. 창이 닫히거나 새로고침을 해도 사라지지 않는다.
localStorage의 저장은 key: value 형태로 저장된다.
localStorage와 관련해 사용할 수 있는 메서드는 다음과 같다.
setItem(key, value): 해당 키 값으로 데이터를 저장
getItem(key): 해당 키 값의 이름을 가진 데이터를 가져옴
removeItem(key): 해당 키 값의 이름을 가진 데이터를 삭제
key(index): 해당 인덱스 값을 가진 키의 이름을 가져옴
clear(): 모든 데이터 삭제
따라서 다음과 같은 적용이 가능하다.
function saveName(text) {
localStorage.setItem(user_LS, text);
}
function saveToDos() {
localStorage.setItem(todos_LS, JSON.stringify(todos));
}이름을 저장하는 함수를 보면 localStorage에 키는 user_LS이고 값은 text라는 것을 알 수 있다.
하지만 to do를 저장하는 함수에는 단순히 값이 todos가 아니라 JSON.stringify(todos)를 활용했다. 그 이유는 todos 또한 키와 값을 담고 있는 객체이기 때문이다. 자바스크립트에서는 localStorage에 object로 저장된다. 따로 키와 값을 읽어오기 위해서는 object 형태의 데이터를 스트링으로 변환해주는 JSON.stringify() 메서드를 사용해 문자열로 바꿔주어야 한다.
참고
https://jess2.github.io/2018/06/06/JavaScript/JS-로컬-스토리지-Local-Storage/
https://webisfree.com/2016-06-24/[자바스크립트]-localstorage-sessionstorage-클라이언트에-정보-저장
