웹 스토리지 API 사용 방법 (로컬 스토리지)

웹 스토리지 API 메커니즘은 브라우저에 키/값 쌍을 저장하는 방법입니다. 웹 스토리지는 세션 스토리지(sessionStorage)와 로컬 스토리지(localStorage)로 나뉩니다.

웹 스토리지의 개념

스토리지(Storage)는 브라우저 내에서 키/값 쌍을 저장할 수 있는 작은 저장 공간이며, 모든 키와 값은 문자열로 저장됩니다(예를 들어, 숫자는 자동으로 문자열로 치환).

 

웹 스토리지는 크게 두 가지 유형으로 나뉩니다.

• 세션 스토리지(sessionStorage): 페이지 세션이 종료되지 않을 때까지 키와 값을 보유합니다. 즉, 페이지 세션이 종료되면 저장된 데이터가 함께 삭제됩니다.
• 로컬 스토리지(localStorage): 브라우저가 종료되고, 이를 다시 열어도 계속해서 키와 값이 존재합니다. 즉, 로컬 스토리지에 저장된 데이터는 브라우저가 종료되어도 삭제되지 않으며, 해당 URL에 다시 접속했을 때 다시 사용할 수 있습니다.

웹 스토리지 사용 방법 (로컬 스토리지)

웹 스토리지 중에서도 구현이 간단하고 편린한 로컬 스트리지 사용 방법에 대해 알아보도록 하겠습니다. 로컬 스토리지에 아이템을 저장하고, 이를 불러오고, 삭제 하는 방법은 무엇일까요?

1. 로컬 스토리지 아이템 추가하기

Storage.setItem() 을 사용하여 새로운 데이터 아이템을 생성하고, 기존 값을 업데이트할 수 있습니다. 두 개의 아규먼트를 받습니다. 첫 번째는 키 값이고, 다른 하나는 저장할 값입니다.

localStroage.setItem('myCat', 'Tom');

2. 로컬 스토리지 아이템 불러오기

Storage.getItem()을 통해 저장소에서 값을 불러올 수 있습니다. 데이터 아이템의 키를 아규먼트로 사용하여 데이터 값을 가져올 수 있습니다.

const cat = localStorage.getItem('myCat');

3. 로컬 스토리지 아이템 삭제하기

특정 도메인에서 하나의 아이템을 삭제하고자 할 때는, 다음과 같이 Storage.removeItem()을 사용합니다.

localStorage.removeItem('myCat');

Storage.clear()의 경우에는 아규먼트를 취하지 않으며, 해당 도메인의 전체 스토리지를 초기화합니다.

localStorage.clear();

참고 자료

• Using the Web Storage API, MDN