[PART1] 웹/디자인 - TERMS 12

[ TERMS 12 ]  웹 스토리지

 

web Storage에 대해서 설명하는 이미지(출처 : https://www.ramotion.com/blog/what-is-web-storage/)

 

1. 웹 스토리지(Web Storage)의 정의

웹 페이지의 데이터를 저장하는 곳은 일반적으로 서버이다. 하지만 일시적으로 사용되는 모든 데이터를 서버에 저장하고 불러오게 된다면 트래픽과 서버 공간의 낭비가 심해진다. 이를 해결하기 위해 일시적으로 클라이언트 단에만 저장하는, 즉 웹 브라우저 내에서 데이터 저장을 가능하게 해주는 것이 바로 웹 스토리지이다.

 

2. 웹 스토리지는 어디서 접하게 될까?

[ e.g. 쇼핑몰 사이트에서의 최근 본 상품 목록 : 상품 조회시 조회 기록을 웹 스토리지에 저장, 장바구니에 담은 목록 : 장바구니에 담을시 상품목록이 웹 스토리지에 저장, 웹 사이트의 자동 로그인, 블로그 글의 임시저장 ]

 

3. 웹 스토리지 알아보기

> 개념

 웹 스토리지 : Web(웹) + Storage(저장소) 두 단어를 합친 용어, 웹 브라우저에 데이터를 저장하는 기술, 기존의 쿠키 방식으로 데이터 를 저장할 때 여러 문제점을 보완해서 HTML5에서 새롭게 등장

 

> 특징

 웹 스토리지는 데이터에 접근 가능한 유일한 키(key)와 해당 키로 저장하는 값(value) 형태로 데이터를 저장한다. 따라서 키 값을 이용해 저장된 데이터를 참조하거나 가져올 수 있다. 이 때 반환되는 데이터 값은 문자열이다. 웹 스토리지는 문자열 데이터만 지원하지만, 객체 형태의 데이터도 문자열로 변환하여 저장할 수 있다.

 

 웹 스토리지는 쿠키의 여러 단점을 보완하고자 등장한 데이터 저장 기술이기 때문에 저장 가능한 데이터 용량이나 개수, 보안 측면에서 쿠키보다 더 나은 성능을 보여준다. 웹 스토리지의 경우 저장 용량이 도메인별로 약 5MB이상이다. 또한 저장 가능한 데이터 개수에 제한이 있는 쿠기에 비해 웹 스토리지는 저장 가능한 데이터 개수에 제한이 없다는 특징이 있다.

 

이 외에도 웹 스토리지 방식은 데이터를 자동으로 서버에 전송하지 않기 때문에 서버 부담이 적고, 보안상으로도 쿠키보다 안전하다. 그러나 쿠키보다 안전할 뿐 여전히 보안상 문제점이 존재하기 때문에 아이디, 패스워드 등 중요한 개인정보는 웹 스토리지에 저장하지 않아야 한다.

 

• 웹 스토리지 특징
  • 키 : 값 형태로 데이터 저장
  • 문자열뿐만 아니라 객체도 저장 가능
  • 전송 가능한 데이터 용량 :  약 5MB 이상
  • 전송 가능한 데이터 개수 : 제한 없음
  • 서버에 데이터를 전송하지 않아 서버 부담이 적음
  • 쿠키에 비해 보안성이 높음

 

> 종류

 웹 스토리지는  데이터가 유지되는 기간에 따라 로컬 스토리지(Local Storage), 세션 스토리지(Session Storage)로 구분된다.

 

• 로컬 스토리지

 로컬 스토리지는 로컬 PC의 저장소를 떠올리면 이해하기 쉽다. 컴퓨터에 저장한 데이터는 직접 삭제하지 않으면 사라지지 않듯이, 로컬 스토리지에 저장한 데이터 또한 사용자가 삭제하지 않는 이상 영구적으로 저장된다. 따라서 탭을 닫더라도 유지되어야 하는 정보를 로컬 스토리지에 저장하는 것이 적합하다.

[ e.g. 자동 로그인 설정 ]

 

• 세션 스토리지

세션 스토리지는 각 세션마다 데이터를 저장하는것으로, 로컬 스토리지와 다르게 데이터의 영구 저장이 불가능하다. 세션 스토리지에 데이터를 저장하는 경우, 페이지의 세션이 끝나면 데이터가 자동으로 삭제된다. 즉, 브라우저 창을 닫으면 저장되어 있던 데이터가 삭제된다 (새로고침의 경우 데이터는 그대로 유지된다) . 브라우저를 사용하는 동안만 유지하면 되는 데이터를 세션 스토리지에 저장하는 것이 적합하다.

[ e.g. 웹 사이트 입력 폼에 사용자가 직접 입력한 값, 이전 페이지의 스크롤 위치]

 

4. 웹 스토리지를 알아야 하는 이유

웹 스토리지는 쿠키의 단점을 보완하여 등장한 저장 기술이다. 따라서 쿠키와 웹 스토리지 각각의 특징을 알고, 경우에[ 따라 적절한 저장 방식을 선택해야 한다. 각 상황에 적합한 데이터 저장 기술을 사용하기 위해서는 웹 스토리지에 대한 학습이 필요하다.

 

5. 웹 스토리지 사용 방법

 로컬 스토리지를 사용할 때는 윈도우의 로컬 스토리지 객체를, 세션 스토리지를 사용할 때는 윈도우의 세션 스토리지 객체를 이용한다. 두 웹 스토리지 모두 메소드를 통해 스토리지를 사용한다.

 

> 웹 스토리지의 메소드

• setItem(key, value)

setItem() 메소드는 로컬 / 세션 스토리지에 데이터를 새롭게 저장할 때 사용한다. string 타입의 키 값과 데이터 값을 파라미터로 받아서 key: value 형태의 오브젝트로 데이터를 저장한다.

    1. 로컬 스토리지

// key : a, value:abcd인 데이터를 저장
localStorage.setItem("a","abcd");

 

    2. 세션 스토리지

// key : a, value:abcd인 데이터를 저장
sessionStorage.setItem("a","abcd");

• getItem(key)

getItem() 메소드는 로컬 / 세션 스토리지에 저장된 데이터 값을 가져와야 할 때 사용한다. 파라미터로 키 값을 주면 키 값에 매칭되는 데이터 값을 반환한다.

    1. 로컬 스토리지

var b = localStorage.getItem("a")
// b = "abcd";

    2. 세션 스토리지

var b = sessionStorage.getItem("a")
// b = "abcd";

 

• removeItem(key)

 removeItem() 메소드는 로컬 / 세션 스토리지에 저장된 특정 데이터 값을 삭제할 때 사용한다. 파라미터로 넘겨 준 키 값에 해당하는 데이터를 삭제한다.

    1. 로컬 스토리지

localStorage.removeItem("a");

    2. 세션 스토리지

sessionStorage.removeItem("a");

• clear()

 clear() 메소드는 로컬 / 세션 스토리지에 저장된 전체 데이터를 삭제할 때 사용한다.

    1. 로컬 스토리지

localStorage.clear();

    2. 세션 스토리지

sessionStorage.clear();

 

> 크롬 개발자 도구에서 웹 스토리지 사용하기

크롬 브라우저에서 개발자 도구(F12)를 열면 상단에 'Application' 탭이 있다.  'Application' 탭의 'Storage' 항목에서 '로컬 스토리지'와 '세션 스토리지'를 확인할 수 있다. 또한 개발자 도구의 콘솔 창에서 로컬/ 세션 스토리지의 메소드를 이용하여 데이터를 직접 추가하거나 삭제할 수 있다.

 

 

6. 웹 스토리지 더 알아보기

> 사용 시 주의점

 웹 스토리지는 HTML5에서 새롭게 등장한 저장 기술로, 일부 브라우저에서는 웹 스토리지를 지원하지 않는다. 따라서 웹 스토리지를 사용하려면 본인의 브라우저가 웹 스토리지 기능을 지원하는지 확인해야한다. 브라우저가 웹 스토리지를 지원하더라도 일부 브라우저의 특정 환경에서 웹 스토리지를 사용할 수없는 경우가 있다.

[ e.g. 시크릿 모드에서 로컬 스토리지를 사용하면 에러가 발생한다]

> 함께 알아 두면 좋은 용어

• 직렬화 / 역직렬화
• 캐시
• 세션
• IndexedDB
• 프로토콜

> 혼동하기 쉬운 용어

• 쿠키

> 참고 자료

• https://www.w3schools.com/html/html5_webstorage.asp