웹 스토리지(Web Storage)란?

웹 스토리지는 데이터베이스 서버나 클라우드 플랫폼이 아닌 브라우저를 통해 데이터를 저장하는 기술이다.

DB에 저장하는 데이터보다 상대적으로 덜 중요한 데이터들을 보통 저장하는데, 웹 스토리지에는 두가지 종류의 스토리지가 있다.

로컬 스토리지와 세션 스토리지이다.

F12를 통해 볼 수 있는 개발자 도구 화면

 

로컬 스토리지 (LocalStorage)

특정 웹사이트를 새탭이나 새창으로 띄워도 동일한 데이터를 공유한다.

브라우저를 종료한 후, 실행시켜도 데이터가 남아있다.

직접 브라우저의 캐시 삭제 및 로컬 스토리지 초기화를 하지 않는 이상 데이터는 영구적으로 보관된다.

단, 같은 컴퓨터에서 같은 브라우저를 사용할 때만 적용된다.

 

세션 스토리지 (SessionStorage)

웹 페이지의 세션이 끝나면 (브라우저 종료) 데이터가 지워진다.

각각의 탭과 창 마다 데이터가 격리되어 저장된다.

 

 

웹 스토리지 메서드 

localstorage, sessionstorage 라는 키워드만 앞에 붙여주면 된다.

• setItem(key, value) : key,value 값 보관
• getItem(key) : 키에 해당하는 값을 받아옴
• removeItem(key) : 해당 key, value값 삭제
• clear() : 모든 데이터 삭제
• key(index) : 인덱스(index)에 해당하는 키를 받아옴
• length : 저장된 데이터쌍(key,value)의 값 길이를 받아옴
• Object.keys : 키 전체를 얻음

ex) localstorage.setItem(key, value)

 

 

참고
https://velog.io/@smy/TIL-21.-Java-Script-Web-Storage