[Javascript] 웹 스토리지(Web Storage)

 

▶ 웹 스토리지(Web Storage)

●  웹은 웹 애플리케이션의 형태로 진화

- 웹 문서를 보여주거나 검색, 구매 등 정보소통 수단을 넘어섬

- 웹 애플리케이션 사례 :게임, 그림 그리기, 학습

● 웹 애플리케이션은 실행 도중 로컬 컴퓨터에 데이터 저장 공간 필요

ex) 게임 웹 애플리케이션 : 사용자 이름, 점수, 최고 점수자의 이름과 점수 등

ex) 쇼핑몰 :사용자가 구입하려는 담은 리스트

● HTML5에서 웹 스토리지 도입

- 사용자 로컬 컴퓨터의 저장 공간

- 웹 서버의 저장 부담과 네트워크 트래픽 감소

- HTML5 웹 스토리지는 오직 자바스크립트로만 읽고 쓸 수 있음

 

 

▷ 쿠키의 한계

- 쿠키의 크기는 4KB로 제한 → 충분한 양의 정보 저장 한계

- 쿠키는 불필요한 트래픽 발생 → 브라우저가 웹 서버에 요청을 보낼 때마다 함께 전송하기 때문

- 쿠키는 윈도우마다 독립적인 값을 저장 불가 → 브라우저의 모든 윈도우들이 공유하므로

 

▷ 웹 스토리지 종류

- 웹 스토리지는 DOM 스토리지라고 불리며 2가지 종류로 나뉨

- 이 둘의 차이점은 저장 데이터의 공유 가능성과 수명에 있음

 

● 세션 스토리지(Session Storage)

- 세션 스토리지는 브라우저 윈도우마다 마련된 독립적인 저장소로서 윈도우가 사라지면 함께 사라지는 일시적인 저장소

- 일시적으로 필요한 데이터 저장시 사용

활용ex) 일회성 로그인, 비로그인 장바구니, 입력폼 정보

 

● 로컬 스토리지 (Local Storage)

- 로컬 스토리지는 모든 브라우저 윈도우들이 공유하며 윈도우나 브라우저가 닫혀도 사라지지 않는 영구적인 저장소

- 지속적으로 필요한 데이터 저장시 사용

활용ex) 자동 로그인, 브라우저 사용자의 입력패턴을 분석하여 저장할 때

▷ 웹 스토리지의 특징

- 문자열만 저장, 그러므로 숫자도 문자열로 바꾸어 저장해야함

- 저장단위는 (키, 값)으로 구성된 아이템 단위로 저장

- 동일한 '키'를 가진 아이템은 존재할 수 없음

- '키' 와  '값' 문자열은 대소문자로 구분

- 저장, 검색, 삭제 등 웹 스토리지의 조작은 모두 자바스크립트 코드로 작성

 

 

 

▷ 세션 스토리지

● 세션 스토리지의 생성과 소멸

- 세션이 생길 때 생성되며, 세션 종료 시 소멸되는 저장소

- 세션 :브라우저 윈도우와 웹 사이트가 연결된 상황

- 그림 (a)에서 윈도우1에서 구글 사이트에 접속하면 윈도우1과 구글 사이트 사이에 세션 생성, 이 세션에서만 사용할 수 있는 세션 스토리지가 만들어짐

- 이 스토리지는 윈도우1에 로드되는 모든 구글 웹 페이지들이 자유롭게 사용가능

- 윈도우가 사라지면 세션 스토리지도 사라짐

- 쿠키를 기반으로 하지만, 쿠키와는 다르게 브라우저가 아닌 서버 측에서 관리

 

- 그 후 사용자가 윈도우1에서 네이버에 접속하면 그림 (b)와 같이 새로운 세션과 함께 네이버 세션 스토리지가 생겨, 윈도우1에는 총 2개의 세션이 만들어지게 됨

- 윈도우1에 로드된 네이버 웹 페이지들은 네이버 세션 스토리지를 사용

- 사용자가 윈도우1에서 백(Back) 버튼을 눌러 구글 사이트에 다시 접속하게 되면 구글 세션 스토리지가 활성화됨

- 윈도우1이 닫히면, 구글 스토리지와 네이버 스토리지 모두 소멸

 

▷ 세션 스토리지의 공유 범위

● 윈도우마다 세션 스토리지 별도 생성

- 윈도우 사이에서는 공유되지 않음

● 세션 스토리지 공유

- 윈도우에 로드된 웹 사이트의 모든 웹 페이지들이 세션스토리지 공유

● 세션 스토리지의 용도

- 한 윈도우에서 연결된 웹 사이트의 웹 페이지들끼리 데이터를 주고 받는 임시 저장 공간

 

 

 

 

▷ 로컬 스토리지

● 로컬 스토리지의 생성과 소멸

- 윈도우에 상관없이 웹 서버(웹 사이트)당 하나씩 생성

- 윈도우가 닫히거나 브라우저가 종료하거나 컴퓨터가 꺼져도 로컬 스토리지가 없어지지 않음

● 로컬 스토리지 공유

- 웹 사이트의 모든 웹 페이지가 로컬 스토리지 공유

● 로컬 스토리지의 용도

- 오프라인 상태에서 웹 애플리케이션이 로컬 컴퓨터의 로컬 스토리지에 저장 가능

 

 

 

▷ 자바스크립트로 웹 스토리지 다루기

- 개발자는 브라우저가 제공하는 Storage 인터페이스를 이용하여 자바스크립트 코드로 웹 스토리지를 읽고 쓸 수 있음

- 세션 스토리지나 로컬 스토리지 모두 동일한 Storage 인터페이스로 접근

● Storage 인터페이스 프로퍼티와 메소드

표 1

 

● sessionStorage, localStorage

- 브라우저 윈도우에 웹 페이지가 로드되면, 로컬 컴퓨터에는 세션 스토리지와 로컬 스토리지가 자동으로 생성되며, 이들을 각각 접근할 수 있는 sessionStorage와 localStorage 자바스크립트 객체도 생성

- 이들은 Storage 타입이므로 표1의 프로퍼티와 메소드를 가지며, 다음 이름으로 사용됨

- 자바스크립트 코드로 웹 스토리지 엑세스를 위한 객체

 sessionStorage, localStorage, window.sessionStorage, window.localStorage

 

▷ sessionStorage와 localStorage 다루기

● 웹 스토리 지원 확인

 

● 아이템 저장 및 변경 :setltem()이나 [ ] 연산자 이용

 

● 아이템 읽기 : '키'로 getItem()이나 [ ] 연산자 이용하여 '값' 알아내기

- '키' 아이템이 없는 경우, getItem()은 null리턴

 

● 아이템 삭제 :removeItem() 이용

 

● 모든 아이템 삭제 : clear()를 이용

 

● 세션 스토리지의 모든 아이템 출력

 

 

 

▷ 세션 스토리지 응용 실습

- Chrome 브라우저로 세션 스토리지에 아이템 저장/검색

 

(1) 세션 스토리지를 조작하는 웹 페이지 작성

 

(2) 개발자 도구로 세션 스토리지 보기

(3) 세션 스토리지에 아이템 쓰기

 

(4) 세션 스토리지에서 아이템 검색

(5) 다른 웹사이트 방문 후 돌아와 세션 스토리지 확인

 

 

▶ 웹 스토리지 이벤트

● storage이벤트

- 웹 스토리지 변경 시 발생

- 아이템 추가, 삭제, 전체 삭제, 아이템 값 변경 등의 경우

- 웹 스토리지를 변경한 윈도우 외 다른 모든 윈도우에게 전달

- window 객체만 storage 이벤트 받을 수 있음

● StorageEvent 객체 :웹스토리지 변경 정보를 담은 이벤트 객체

 

● storage 이벤트 처리

 

 

▷ 로컬 스토리지에 storage 이벤트 실습

- storage 이벤트 실습 코드 :storageEvent.html

 

(1) Chrome 브라우저로 두 윈도우에 각각 storageEvent.html 열기

(2) 윈도우1에서 (골뱅이, 200) 아이템을 로컬 스토리지에 저장

 

(3) 윈도우1에서 (골뱅이, 200) 아이템의 '값'을 200에서 50으로 수정

 

 

참고문헌: 쿠키, 세션, 로컬 스토리지, 세션 스토리지 : 네이버 블로그 (naver.com)