localStorage/sessionStorage 클라이언트에 정보 저장

웹에서 데이터를 저장하는 방법 중 서버가 아닌 클라이언트에서 가능한 방법을 알아보려고 합니다.

웹사이트의 정보를 저장하기 위해서 반드시 서버가 필요한 것은 아닙니다. 사용 목적에 따라 클라이언트 저장소 역시 좋은 역할을 할 수 있습니다. 일반적으로 클라이언트 저장소를 생각하면 가장 먼저 쿠기 저장소를 떠올리겠지만 html5에는 좀 더 효과적인 클라이언트 저장 공간을 제공하는데 어떤 것이 있는지 알아보면 다음과 같죠.

! localStorage, sessionStorage API 알아보기 html5에서는 좀 더 쉽고 간단한 저장소 제공을 위해 새로운 localStorage와 sessionStorage API를 제공합니다. 둘 다 저장 공간으로 사용할 수 있는데 이 둘의 가장 큰 차이점이라면 저장소로서의 기능은 대부분 동일하며 단지 sessionStorage의 경우 세션이 종료되면 저장된 데이터도 함께 사라진 다는 점이 다른 점입니다. 그렇다면 이 메소드는 어떤 경우에 사용할 수 있을까요? 쿠키를 포함해 서로의 장단점에 대하여 비교하며 알아보도록 하겠습니다.

# 쿠키, 서버 저장소, localStorage, sessionStorage 차이점 및 장단점

쿠키의 경우 저장 가능한 공간의 크기가 가장 작고 하나의 텍스트 형태로 저장된다. 그렇기 때문에 비교적 간단한 텍스트 타입의 데이터를 저장하는데 용이하다. 이런 값으로는 팝업의 이름을 예로 들 수 있다. 팝업의 경우 24시간 동안 동작하지 않도록... 즉 열지 않도록 설정하는 경우가 많은데 이때 쿠키의 변수를 저장하고 24시간의 만료시간을 설정하는 것이 좋다.

서버저장소는 데이터의 동기화가 필요하기 때문에 꼭 필요한 경우가 아니라면 전송을 최소하 하는 것이 좋을 것이다. 이런 이유로 서버 저장소는 데이터의 크기가 매우 크거나 반드시 저장해야 하는 경우에만 사용된다.

데이터가 크기나 만료시간을 고려했을때 위 저장소의 중간 정도의 애매한 경우가 있을 수 있다. 저장소가 필요하지만 다수의 컬럼이 필요한 경우가 아니만 단순한 형태라면 localStorage, sessionStorage를 사용하는게 효과적인 방법이다.

! localStorage, sessionStorage를 어떤 경우에 사용할까

대부분의 데이터의 경우 데이터베이스에 저장하므로 로컬 및 세션 스토리지가 사용되는 곳은 그리 많지 않다. 대부분 임시적인 용도 또는 캐시, history 기능을 위하여 사용된다. 아래의 경우가 그 예이다.

• 글 작성 중간 중간에 잃어버리지 않기 위한 임시 저장용도

• 장바구니나 좋아하는 콘텐츠 등 수시로 변경되는 경우

• 방문자의 이동 경로를 저장하였다가 이동할 경우

• 그 외 서버에 반드시 저장할 필요가 없는 경우

그럼 아래에서는 예제를 통하여 더욱 자세하게 알아보자.

# localStorage 예제 및 코드보기

앞에도 언급했지만 위 두가지 객체의 차이점은 세션에 따라서 데이터가 유지되는가 안되는가로 구분할 수 있다. 그렇기 때문에 사용하는 방법도 거의 동일하다 하겠다. 아래는 localStorage객체의 사용로 자주 사용되는 메소드, 프로퍼티를 함께 알아보자.

# 데이터의 저장 setItem()

특정값의 데이터를 저장하기 위한 방법으로 아래와 같이 메소드를 사용하거나 리터럴하게 사용하는 두 가지 방법이 가능하다. 아래 예제는 test란 이름의 key값을 정하고 이에 123이란 값을 저장하는 예제이다.

localStorage.test = '123';
localStorage.setItem('test', '123');

여기서 사용된 setItem() 메소드는 값을 저장하는 간단한 방식으로 key값에 매칭된 value를 인자로 넘겨주면 된다. 매우 간단하게 저장할 수 있다. 아래는 등록된 key값의 value를 얻기 위한 방법이다.

# 데이터 불러오기, getItem()

localStorage.test;
localStorage.getItem('test');

역시 직접 키값을 입력하거나 getItem() 메소드를 사용하는 방법 두 가지가 있다. 아래는 특정 key 값을 지우는 방법에 대하여 알아보자.

참고로 전체 localStorage에 담겨있는 모든 값을 확인하려면 getItem()에 아무런 값도 넘기지 않으면 모든 정보를 받아올 수 있다.

localStorage.getItem();  //  전체 값 받아오기

그럼 아래는 데이터를 삭제하는 방법이다.

# 데이터 삭제, removeItem()

아래는 test라는 키값에 저장된 값을 삭제하는 예제이다.

localStorage.removeItem('test');
// localStorage 객체에서 원하는 값을 지우는 방법
localStorage.clear();
// 한번에 저장된 모든 값을 삭제하는 방법

데이터를 삭제할 경우 removeItem()을 사용하여 하나만 제거할 수 있고 아니면 모든 값을 지울 수 있눈 clear() 메소드도 존재한다.

# sessionStorage 예제보기

세션을 기준으로 데이터가 저장 및 유지되기 때문에 이 객체에 저장된 값은 일시적인 수명을 가지게된다. 만약 세션이 종료되는 경우... 브라우저를 닫거나 일정시간 아무런 동작도 하지 않는다면 당연히 저장된 값은 삭제될 것이다.

만약 데이터가 삭제되지 않길 바란다면 위에 나와있는 localStorage를 사용하기 바란다. 아래의 사용방법은 localStorage와 거의 동일한 메소드와 프로퍼티를 갖는다. 즉, 동일한 방법으로 사용이 가능하다 하겠다. 그럼 아래 예제를 참고하자. (참고로 세션을 사용한 저장방법은 보안 및 중요한 데이터의 경우 무방비로 노출되는 경우를 피하기 위해서 사용되는 경우가 많다.)

sessionStorage.setItem("domain", "webisfree.com");
//  domain이란 키(key) 값을 사용하여 해당 텍스트를 저장함
sessionStorage.getItem("domain");
// 키에 저장된 값을 반환. 여기서는 webisfree.com 출력됨
sessionStorage.removeItem("domain");
// domain 키와 데이터 모두 삭제
sessionStorage.clear();
// 저장된 모든 값 삭제

! 참고사항

인터넷 익스플로러 IE(Internet Explorer)는 10MB의 공간을 사용할 수 있고, 그 외 브라우저는 대부분 5MB의 공간을 사용할 수 있다. 사실 로컬 또는 세션스토리지 모두 사용되는 부분이 한정적이고 대부분 텍스트 공간을 차지하므로 용량이 부족하다던가의 이슈는 대부분은 없을 것이다.