내머리속JS - Storage

JAEN·2020년 3월 15일

내머리속 JS 🙈

목록 보기

13/14

들어가기전... 🧐
웹 스토리지가 주어지게 된 이유는

웹은 비연결지향적이므로, 웹서버는 클라이언트 상태를 기억하지 못합니다.

기존의 쿠키에 대한 제약들을 해소하고 조금 더 다양하고 클라이언트에 많은 기능들을 넣고자 하였기 때문입니다.

쿠키는 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어져 매 서버 요청마다 서버로 쿠키가 전송됩니다. (<-- 웹이 느려지게 하는 원인)

(서버 요청을 보낼 때 요청한 주체가 누군지 알기 위해 쿠키에 '나'에 대한 정보를 담아 서버로 보내 파악합니다.)

비교샷

하지만 쿠키는 4KB 용량제한을 두어 요청을 할 때마다 기본 4KB 데이터를 사용합니다.

이때 서버에 필요하지 않은 데이터들도 포함되어 데이터 낭비가 발생하는데.. 이 데이터들을 스토리지에 저장하여 단점을 보완합니다.

이러한 문제점을 보완하기 위하여 용량을 확장하고,

서버로는 전달이 되지 않고 브라우저 로컬에만 저장되며, 보안도 보장할 수 있도록 새로운 표준을 정의했습니다.

Storage

HTML5에서 브라우저의 내부 스토리지를 사용할 수 있도록 제공해주는 기능으로 웹에 있는 스토리지가 아니라 브라우저 로컬에 있는 스토리지

스토리지는 'Local Storage', 'Session Storage'로 구성되어 있습니다.

모두 window 객체안에 들어 있어 Storage 객체를 상속받기 때문에 메소드가 공통적으로 존재합니다.

도메인 별 용량 제한도 있습니다.(프로토콜, 호스트, 포트가 같으면 같은 스토리지를 공유합니다)

호환성

로컬스토리지 지원 여부 검사

if(('localStorage' in window) && (window['localStorage'] !== null))

브라우저별 최대 저장 용량 ( detail support-test )

1. Local Storage

window.localStorage에 위치합니다.
Storage 객체 로 구성됩니다.
브라우저가 닫혀도 데이터가 유지되므로 만료날짜가 없는 데이터를 저장합니다.
Domain 이 다르면 서로의 로컬 스토리지에 접근 및 공유할 수 없습니다.
{ key : value } 구성으로 순서대로 저장됩니다.
: value - 문자열, Boolean, 숫자, null, undefined 등으로 저장되며, 모두 문자열로 반환됩니다.
* Array, Object 형식으로 저장할 경우, [생성자]형으로 저장되므로 'JSON.stringify()' 변환 후 저장해야 합니다.

2. Session Storage

window.sessionStorage에 위치합니다.
Storage 객체 로 구성됩니다.
세션이 종료되는 경우(브라우저를 닫거나 일정시간 아무런 동작이 없을 경우) 저장된 값이 사라집니다.

3. Method (How to Use)

[Web_Storage_API]
두 스토리지 같은 Storage 객체 를 상속 받으므로 같은 메서드를 사용합니다.

Storage.length
저장된 변수의 개수
Storage.key(n)
특정 숫자 n에 대해서, 스토리지에 n번째 저장되어 있는 키의 이름을 반환합니다.
Storage.getItem(key) :: 데이터의 값을 저장할 때 사용하는 메소드
키의 이름을 넘기면, 키 값이 반환됩니다. / key 없을 경우 전체 데이터를 반환됩니다.
Storage.setItem(key, value) :: 데이터의 값을 불러올 때 사용하는 메소드
키 이름과 값을 지정하여 스토리지에 저장합니다. 만약 키가 이미 있다면, 키의 값을 업데이트합니다.
Storage.removeItem(key)
키 이름에 해당하는 아이템을 제거합니다.
Storage.clear()
스토리지의 모든 키를 제거합니다.

예시 소스

//데이터 저장
localStorage.jaen = "choi";
localStorage.setItem("jaen", "choi");
 
sessionStorage.setItem("jaen", "choi");
 
//데이터 불러오기
localStorage.jaen;				//'choi'
localStorage.getItem("jaen");  //'choi'
 
sessionStorage.getItem("jaen");	//'choi'
 
 
//데이터 삭제
localStorage.removeItem('jaen');
 
sessionStorage.removeItem("jaen");