클라이언트 측 데이터 저장소 - 웹 스토리지 (Web Storage)

웹 스토리지는 사용자의 브라우저에 데이터를 저장하는 기능을 말합니다.

 

웹 스토리지는 서버로 데이터를 전송하지 않는다는 점에서 쿠키를 사용하는 방식에 비해 안정성이 높고 쿠키에 비해 더 많은 데이터를 저장할 수 있습니다.

 

HTML에서 제공하는 웹스토리지 객체는 아래와 같습니다.

• localStorage: 저장되는 데이터의 만료기한이 없음
• sessionStorage: 브라우저 세션이 종료되면 데이터도 사라짐

사용방법

사용방법은 아래와 같이 저장할 정보를 'setItem('key', 'value')를 통해 추가하고 이후 getItem('key'), removeItem('key')를 사용하여 저장된 정보를 불러오거나 지우는 방법으로 활용합니다.

1. localStorage

▶ 데이터 저장

localStorage.setItem('name', 'tom')

▶ 데이터 가져오기

 

localStorage.getItem('name')

▶ 특정 데이터 삭제하기

 

localStorage.removeItem('name')

▶ 모든 데이터 삭제하기

 

localStorage.clear();

2. sessionStorage

▶ 데이터 저장

sessionStorage.setItem('nameSession', 'tom')

▶ 데이터 가져오기

 

sessionStorage.getItem('nameSession')

▶ 특정 데이터 삭제하기

 

sessionStorage.removeItem('nameSession')

▶ 모든 데이터 삭제하기

 

sessionStorage.clear()

 

확인하는 방법

개발자도구를 열고 상단 탭 우측 '>>' 기호 선택 후 'Application'을 선택합니다.

 

열린 창 좌측에서 'Local Storage' 또는 'Session Storage'를 선택하여 해당 정보를 검색합니다 (저장된 key로 검색 가능)

 

개발자도구를 통한 데이터 삭제도 가능한데요 상단 검색창 우측에 사선이 그어진 동그라미를 선택하여 모든 데이터를 지우거나 엑스로 선택된 데이터를 지울 수 있습니다.

 

이상으로 웹스토리지에 대해서 알아보았습니다.

---

참고

HTML Web Storage API