WebStorage API

WebStorage API

 

Web Storage API는 브라우저에서 키/값 쌍을 쿠키보다 훨씬 직관적으로 저장할 수 있는 방법을 제공함.

 

WebStorage 개념

Web Storage의 두가지 방식은 다음과 같다.

 

sessionStorage

페이지 세션이 유지되는 동안, 브라우저가 열려있는 동안 제공됨.

 

  - 세션에 한정해, 브라우저 또는 탭이 닫힐 때까지만 데이터 저장

  - 데이터를 서버로 전송하지 않음

  - 저장 공간이 쿠키 보다 크다 (최대 5MB)

 

LocalStorage

로컬스토리지는 브라우저를 닫았다 열어도 데이터가 남아있다.

 

  - 유효기간 없이 데이터를 저장하고, JavaScript를 사용하거나 브라우저 캐시 또는 로컬저장 데이터를 지워야만 사라짐

  - 저장 공간이 셋 중 제일 크다.

  - 동일한 컴퓨터 및 동일한 브라우저를 사용 할 때만 영속성이 있음(크롬으로 저장하였다가 파이어폭스로 하면 사라짐)

 

로컬 스토리지와 세션스토리지의 공통점은

데이터를 브라우저에 저장한다.

자바 스크립트 API가 동일한 형태이다.

 

사용법

 

//val이란 키 값에 데이터 저장
localStorage.setItem(‘val’ , value);

// ‘val’이란 키 값으로 데이터 읽기
localStorage.getItem(‘val’);

// ‘val’ 이란 키 값의 데이터 삭제
localStorage.removeItem(‘val’);

// 모든 키의 데이터 삭제
localStorage.clear();

//저장된 키/값 쌍의 개수
localStorage.length;

sessionStrorage 도 마찬가지로 이와 같이 사용하면 된다.

 

주의 사항

 

웹 스토리지는 오로지 문자형(string) 데이터 타입만 저장할 수 있다.

숫자 타입인 1을 웹 스토리지에 넣었을 경우 문자형이 나오는 것을 확인할 수 있다.

이를 해결하기위해서는 json 데이터 형태로 넣으면 숫자로도 넣기가 가능하다

 

나의 생각

 

지금 내가 적은 내용은 표면적인 내용과 사용법 정도고 더 자세한 내용은 더 자료들을 찾아 봐야겠다

 

참고자료

- mdn WebStorage https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API#web_storage_%EA%B0%9C%EB%85%90%EA%B3%BC_%EC%82%AC%EC%9A%A9%EB%B2%95

- https://www.daleseo.com/js-web-storage/