Web Storage) LocalStorage, SessionStorage, Cookie

WEB STORAGE

HTML5 에는 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage 스펙이 포함되어 있다.

Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 방식이다.
그리고 LocalStorage와 SessionStorage를 따로두어 데이터의 지속성을 구분할 있어 응용 환경에 맞는 선택이 가능하다.

Web Storage는 기존 웹 환경의 쿠키와 매우 유사한 개념이다. (몇가지 쿠키의 단점을 극복하는 개선점 도입)
하지만 쿠키는 여전히 유효하고 꽤 적절한 클라이언트 저장도구라는 것은 틀림없다. HTML5에서 Web Storage스펙을 새로 추가했지만 쿠키를 배제한다는 의미는 아니다. HTML5에서도 여전히 쿠키 이용이 가능하다.

> LocalStorage란?

• 데이터를 사용자 로컬에 보존하는 방식
• 데이터를 저장, 덮어쓰기, 삭제 등 조작 가능.
• 자바스크립트로 조작
• 모바일에서도 사용가능함

쿠키와 차이점?
-유효기간이 없고 영구적으로 이용가능
-5MB까지 사용가능하다.(쿠키는 4KB)
-필요할 때 언제든 사용 가능

LocalStorage 기본 구성
-key와 value를 하나의 세트로 저장
-도메인과 브라우저별로 저장.
-값은 반드시 문자열로 저장

-사용방법-

예제 코드를 확인해보자.

const init = () => {
	localStorage.Test = "Sample";
	localStorage["Test"] = "Sample";
	localStorage.setItem("Test", "Sample");
} // 데이터 추가 방법

const init = () => {
	// 데이터 취득 방법 
	var val = localStorage.Test;
	var val = localStorage["Test"];
	var val = localStorage.getItem("Test");

	//취득 데이터 출력
	document.querySelector("#result").innerHTML = val;
}

SessionStorage란?

SessionStorage는 LocalStorage와 동일한 기능을 가진 브라우저 저장소다.
데이터를 저장하기 위해서는 일반적으로 DB를 사용한다. 하지만 장바구니, 사용자정보같은 데이터를 DB에 저장한다는 것은 비용낭비일 수 있다.
데이터 저장의 목적이 아닌 휘방성 데이터를 저장하기 위한 목적으로 SessionStorage 또는 LocalStorage를 사용하면 좋을 것 같다.

SessionStorage에 저장하기

sessionStorage.setItem(key, value)

key와 value 형태로 저장되며 LocalStorage와 동일하다.
주의할점은 value는 문자열로 저장 가능하다. (문자열이 아닌 다른 타입으로는 정상적으로 저장이 안됨)
다른타입으로 저장하고자 한다면 JSON메소드를 사용하여 저장한다.

SessionStorage에서 가져오기

sessionStorage.getItem(key)

SessionStorage에서 값을 가져오기 위해서는 저장한 key값으로 조회하면 된다.

-저장한 key값으로 저장된 value의 값을 가져올 수 있다.
-단순 문자열을 저장한 경우에는 한번에 가져올 수 있지만 문자열이 아닌 다른 타입을 저장한 경우에는 문자열에서 원본타입으로 변환시키는 과정이 필요하다.

SessionStorage에서 삭제하기

sessionStorage.removeItem(key)
sessionStorage.clear()

removeItem()으로 특정 key값을 삭제 할 수 있고 clear()로 현재 session storage의 데이터를 모두 삭제 할 수 있다.

sessionStorage.clear()

위 코드로는 저장된 모든 값을 일괄 삭제도 가능하다.