[HTML&DOM]LocalStorage 사용법

개요

프로젝트 개발을 진행하다 보면 데이터를 저장해야 하는 경우가 생깁니다. 이런 경우 브라우저에서 제공하는 LocalStorage와 SessionStorage 두 가지 중 데이터가 지니고 있는 특성에 맞는 것을 선택하여 사용할 수 있습니다.

LocalStroage vs SessionStorage

두 저장소는 데이터를 저장한다는 공통점을 가지고 있으나, 데이터의 지속성에 대한 차이점이 있습니다.
LocalStorage에 저장된 데이터는 만료 기간이 없으며 브라우저가 닫혀도 데이터는 지속된다는 특징을 가지고 있으나, SessionStorage는 브라우저 종료시 데이터가 모두 사라지게 됩니다.

사용법

localStorage.setItem()

key-pair 형태로 데이터를 저장소에 저장합니다. 저장소에 저장되는 데이터는 string형식으로 변환되어 저장됩니다.

const fruits = ['apple', 'banana', 'orange'];
localStorage.setItem('fruits', fruits);

localStorage.getItem()

전달받은 프로퍼티의 값의 데이터를 저장소에서 가져옵니다.

localStorage.getItem('fruits');  // "apple,banana,orange"

또한 전달받은 프로퍼티에 해당하는 값의 데이터가 저장소에 없을 경우 null을 반환합니다.

localStorage.getItem('vegetables');  // null

Array, Object 데이터를 저장할 경우

LocalStroage에 저장되는 데이터는 string형식으로 저장되기 때문에 Array, Object형태의 데이터를 저장하여 사용하고자 할 경우 문제가 발생할 수 있습니다.

const fruits = ['apple', 'banana', 'orange'];
localStorage.setItem('fruits', fruits);

localStorage.getItem('fruits');  // "apple,banana,orange"

위와 같이 LocalStorage에서 데이터를 가지고 올 때 Array형태를 예상하였으나, String형식으로 전달하여 해당 데이터의 형변환이 필요할 수 있습니다.

이렇게 데이터의 형을 유지하며 데이터를 저장하기 위하여 JSON.stringify()를 사용하여 저장하고 데이터를 가지고 올 때 JSON.parse()를 사용한다면 Array, Object 형식의 데이터를 가지고 올 수 있습니다.
JSON.stringify(), JSON.parse() 설명 및 사용법은 여기에서 확인 할 수 있습니다.

const fruits = ['apple', 'banana', 'orange'];    // ["apple","banana","orange"]
localStorage.setItem('fruits', JSON.stringify(fruits));

JSON.parse(localStorage.getItem('fruits'));    //  ["apple", "banana", "orange"]

localstorage.removeItem()

전달받은 프로퍼티에 해당하는 저장되어있는 데이터를 삭제합니다.

localStorage.removeItem('fruits');  // undefined

localStorage.getItem('fruits'); // null

localStorage.clear()

저장소에 저장되어있는 데이터를 모두 삭제합니다.

localStorage.clear();

저장소 데이터 확인

개발자도구에서 LocalStorage에 저장된 데이터를 확인할 수 있습니다.

참고자료

(MDN Web Docs: localStorage)[https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage]