최근에 Javascript를 통해 단순한 애플리케이션들을 구현을 해봤는데 정보를 저장해야 하는 기능에서 localStorage와 sessionStorage를 두고 무엇을 쓰면 좋을지 정확히 판단을 할 수 없었다. 따라서 이참에 제대로 알고 어떤 상황에서 무엇을 쓰면 좋을지 공부를 하기로 결심했다.
localStorage와 sessionStorage는 브라우저에서도 정보를 키-값 형태(이때 저장되는 키와 값은 반드시 문자열이어야 한다)로 저장할 수 있는 웹 스토리지 객체이다. 웹 스토리지의 제한 용량은 5MB 이상(브라우저마다 다를 수 있음)이며 저장할 데이터를 서버에 전송할 필요가 없는 경우 유용하다. 웹 스토리지는 데이터의 지속성에 따라 localStorage, sessionStorage 둘로 나뉜다.
localStorage, sessionStorage 이 두 읽기 전용 속성을 사용하면 window의 오리진의 Storage 객체에 접근할 수 있다.
Storage 객체는 다음과 같은 메서드를 갖는다.
storage.length
: 키-값 쌍의 수를 반환한다.storage.key(index)
: 인덱스(index)에 해당하는 키를 받아오며 length
보다 크거나 같으면 null을 반환한다.storage.getItem(key)
: 키에 해당하는 값을 반환한다. 키가 존재하지 않는 경우 null을 반환한다.storage.setItem(key, value)
: 키-값 쌍을 생성한다.storage.removeItem(key)
: 키와 해당 값을 삭제한다.storage.clear()
: 모든 키-값을 삭제한다.오리진(origin): 프로토콜 + 도메인 + 포트
예) https://www.google.com/PORT
아래의 코드를 실행해본다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<script>
localStorage.setItem('test', 'hi');
console.log(localStorage.getItem('test'));
</script>
</body>
</html>
개발자 도구의 Application 탭에 localStorage
와 sessionStorage
를 볼 수 있다.
위의 코드는 localStorage
에 키-값을 저장했기에 다음과 같이 localStorage
에 우리가 의도한 값이 저장돼있음을 볼 수있다.
콘솔창에서도 우리가 저장한 키를 통해 매핑된 값을 출력하는 것을 볼 수 있다.
localStroage
의 키와 값을 설정할 때 일반 객체와 유사한 방법을 사용할 수 있다.
// hello라는 키와 2라는 값을 저장
localStorage.hello = 2;
// hello 키에 해당하는 키와 값 삭제
delete localStorage.hello;
하지만 위의 방법처럼 사용하는 것은 다음과 같은 이유로 좋지 않다.
length
, toString
, localStorage
의 내장 메서드를 키로 설정할 수 있다. 이렇게 되면 getItem
, setItem
은 정상 작동해도, 일반 객체처럼 다룰 때 에러가 발생할 수 있다.
let key = 'length'
localStorage[key] = 5; // TypeError: Cannot assign to read only property 'length'...
데이터를 수정하면 storage
이벤트가 발생하는데, 이 이벤트는 localStorage
를 객체처럼 접근할 땐 일어나지 않는다.
localStorage
는 iterable 객체는 아니지만 length
프로퍼티를 가지고 있으며 다음과 같이 순회할 수 있다.
for (let i = 0; i < localStorage.length; ++i) {
const key = localStorage.key(i);
console.log(localStorage.getItem(key));
}
locaStorage
의 키와 값은 반드시 문자열이어야 한다. 따라서 객체를 그냥 저장한다면 원하는 대로 저장되지 않는다.
localStorage.setItem('test', { a: 1 });
따라서 JSON.stringify()
를 사용하여 객체를 저장한 후 값을 가져올 때는 JSON.parse()
를 사용한다.
localStorage.setItem('test', JSON.stringify({ a: 1 }));
console.log(JSON.parse(localStorage.getItem('test')));
sessionStorage
가 공유된다.sessionStorage
의 사용방법은 localStorage
와 동일하다.
[TIL] Cookie vs LocalStorage vs SessionStorage