[자바스크립트] 로컬 스토리지(LocalStorage) / 세션 스토리지(SessionStorage)

 

◆ 스토리지(Storage)

- 로컬 스토리지

  : HTML5에서 추가됨  

  : window 객체의 하위 객체

  : 영구 저장

 

- 세션 스토리지

  : 브라우저 실행 중에만 유효

 

- 로컬 스토리지와 세션 스토리지는 유효 기간 외에는 사용하는 데 큰 차이가 없음

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

- 예를 들어, 숫자형 데이터를 로컬 스토리지에 쓰고 다시 다시 읽어보면 본래 숫자가 아닌 문자가 나옴

스토리지 종류

구분	유효기간
localStorage	없음(영구적)
sessionStorage	브라우저 탭이 열려 있는 동안만 유효하며 종료 시 삭제됨

 

 

◆ 로컬 스토리지(LocalStorage)

key와 value

- 로컬 스토리지의 저장은 키와 값의 형태로 이루어짐

- 키는 저장된 값을 식별하고 가져오는 데 사용되고 원하는 만큼 로컬 스토리지에 키를 저장 가능

- 반대로 키를 가져올 때는 조회하려는 키 값으로 요청

- 할당된 키에 저장되는 값은 숫자, 문자열 또는 객체(JSON)나 배열 같은 형태로 저장 가능

 

데이터 저장 및 조회하기

- 로컬 스토리지 메서드 및 속성

이름	구분	쿠키
setItem(key, value)	메서드	해당 키 값으로 데이터를 저장
getItem(key)	메서드	해당 키 값의 이름을 가진 데이터를 가져옴
removeItem(key)	메서드	해당 키 값의 이름을 가진 데이터를 삭제
key(index)	메서드	해당 인덱스 값을 가진 키의 이름을 가져옴
clear()	메서드	모든 데이터를 삭제
length	속성	저장된 데이터 수를 가져옴

 

 

// 키에 데이터 쓰기
localStorage.setItem("key", value)

// 키로 부터 데이터 읽기
localStorage.getItem("key")

// 키의 데이터 삭제
localStorage.removeItem("key")

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

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

 

 

- 인터넷 익스플로러에서 테스트 시 주의할 점

 : 로컬 실행 환경에서 스토리지 기능이 작동하지 않음

 : 반드시 서버 실행 환경에서 URL로 지정해야만 확인할 수 있으므로 주의

 

 

- 데이터 저장 및 조회

 : 로컬 스토리지에name이라는 키 값으로jess2라는 값을 저장한 다음 다시 저장한 키 값으로 데이터를 조회

// 저장
localStorage.setItem('name', 'jess2');

// 조회
var getValue = localStorage.getItem('name');
console.log(getValue); // jess2

 

 

 

- 크롬 개발자 도구의 스토리지 확인

 ① 크롬 개발자 도구에서 Application탭을 클릭

 ② Storage > Local Storage에 저장한 데이터의 키와 값을 확인 가능

 ③ 데이터 삭제도 다음과 같이 removeItem()메서드로 간단하게 처리

localStorage.removeItem('name');

 

 

 

[출처]

jess2.github.io/2018/06/06/JavaScript/JS-%EB%A1%9C%EC%BB%AC-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-Local-Storage/

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