[JavaScript / Jquery] 웹 스토리지 (localStorage / sessionStorage) 사용법

😊 아주 쉽고 간단하게 😊

▼ 이전 편 ▼

2022.03.29 - [개발/JavaScript] - [JavaScript / Jquery] 문자열 치환 함수 (replace, replaceAll) 사용하기

[JavaScript / Jquery] 문자열 치환 함수 (replace, replaceAll) 사용하기

---

반응형

😊 아주 쉽고 간단하게 😊

- localStorage / sessionStorage 란 ?

 로컬 스토리지(localStorage) / 세션 스토리지(sessionStorage) 두 스토리지는 차이점이 존재한다.

└ 세션 스토리지는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워진다.

└ 로컬 스토리지는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않고 유지된다.

└ 로컬 스토리지는 여러 탭이나 창 간에 데이터가 서로 공유되며, 탭이나 창을 닫아도 저장시킨 로컬 스토리지

    데이터는 브라우저에 그대로 남아 있다.

└ 세션 스토리지는 브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄우면, 여러 개의 데이터가 격리되어

    저장되며, 각 탭이나 창이 닫힐 때 저장해 둔 데이터도 함께 소멸한다.

 

- 사용 법 / 코드 예시

< localStorage >

// 저장하기
localStorage.setItem(key,value);

// 가져오기
localStorage.getItem(key);

// 지우기
localStorage.removeItem(key);

// 전체 지우기
localStorage.clear();

See the Pen Untitled by 조형진 (@jiniuscom) on CodePen.

 

< sessionStorage >

// 저장하기
sessionStorage.setItem(key,value);

// 가져오기
sessionStorage.getItem(key);

// 지우기
sessionStorage.removeItem(key);

// 전체 지우기
sessionStorage.clear();

See the Pen Untitled by 조형진 (@jiniuscom) on CodePen.

-  localStorage / sessionStorage 사용시 주의사항

오직 문자형(string) 데이터 타입만 지원한다.

숫자형 저장시 문자형으로 변환된다.

 

---