웹 스토리지 사용법

웹스토리지

웹 스토리지의 짧은 역사에 대해

HTML5가 거론되기 이전부터 동적인 윕페이지의 기능을 활용해서 애플리케이션처럼 동작하는 사이트들은 이미 많이 존재해왔다. 웹앱이라 불리는 이러한 서비스들은 웹브라우저의 스크립 처리 성능이 비약적으로 발전함에 따라 네이티브앱(PC에 설치되는 앱)에 견줄만한 수준으로도 발전했다. 또한 데이터를 가상의 공간에 올려두고 어디서나 다운로드하여 이용하는 클라우드 컴퓨팅과 모바일 기기들과의 접점에서 이러한 웹앱들은 상당한 주목을 받고 있기도 하다. 당장 마이크로소프트의 오피스 스위트도 웹 버전이 존재하고, 구글 문서도구 또한 매우 잘만들어진 게다가 놀라운 수준의 협업 기능까지 포함한 유명한 웹앱이다.

그러나 “클라우드컴퓨팅”이라는 개념이 보편화되기 이전에는 이러한 윕앱들은 분명한 한계를 가지고 있었다. 다름이 아니라 정보를 로컬에 저장할 수 없다는 점이었다. 특히 모바일 인터넷이 활성화 되기 이전, 즉 어디서나 인터넷에 접속하기가 어려웠던 때에는 이 부분은 웹앱의 발목을 상당히 단단히 붙잡는 약점이었다.

네이티브 앱들은 단순한 텍스트파일에서부터 XML이나 혹은 자체 포맷의 데이터 파일 내지는 로컬에 저장되는 데이터베이스를 통해 사용자가 생산해내는 컨텐츠를 쉽게 저장했다. 그리고 모든 OS들은 이러한 과정을 매우 수월하게 처리할 수 있는 여러 계층들을 API라는 이름으로 제공한다.

반면 웹은 “익명의 서버”로부터 내려받는 웹페이지에서 수행되는 기능을 사용해야하므로 웹과 로컬은 매우 철저히 구분되었다. (만약 웹페이지를 통해서 로컬의 자원을 액세스할 수 있는 방법이 발견된다면, 우리는 그것을 취약점 이라고 부른다

초기의 로컬 저장소 – 쿠키

하지만 실질적으로 웹브라우저의 일부 정보들을 저장하는 방법이 없는 건 아니다. 이제는 인터넷 서핑 좀 했다하는 사람은 한 번 쯤은 들어보았을법한 ’쿠키’는 웹의 길지 않은 역사의 꽤 초창기때 만들어진 기술이다. 쿠키는 방문했던 웹 사이트에 대해 약간의 정보를 사용자의 컴퓨터 이느 곳에 기록해 둘 수 있는 좋은 장치이다. 웹사이트는 쿠키를 통해 이전에 방문했던 사이트에 로그인하고 있는 상태라는 것을 기억할 수 있으며, 그외 이런저런 웹사이트에 대한 환경설정값 같은 것들을 저장해둘 수 있었다.

하지만 쿠키는 치명적인 문제점을 가지고 있다. 그 문제점은 바로 4kb라는 용량 제한이다. 4kb는 웹 앱의 저장공간으로는 그다지 유용하게 쓰일만큼의 충분한 크기가 못된다. 문제는 여기서 끝나지 않는다. 쿠키는 HTTP통신(웹서버와 브라우저 사이의 통신)에 항상 포함된다. 따라서 쿠키에 더 많은 정보가 쌓이게 될 수록 웹앱은 점점 더 많은 데이터를 중복해서 주고 받아야 한다. 결국 4kb라는 용량은 웹앱의 성능을 망쳐버리기에는 충분한 용량이다.

보다 본격적인 시도 – 구글 기어스

웹앱을 본격적으로 규모를 가진 서비스로 만들어낸 회사는 다름아닌 구글이다. 구글 문서도구와 같이 비교적 많은 양의 데이터를 만들어내고 또 끊임없이 서버와 데이터를 주고 받으며 교신해야하는 웹앱에 있어서 쿠키를 사용하는 것은 애초에 불가능했으며, 또한 모든 정보의 변경사항을 매번 서버로 전송하여 저장하는 것도 별로 좋은 해결책은 못되었다.

결국 구글은 웹 앱이 로컬에 데이터를 저장할 수 있는 플러그인을 만들기 시작했고 이것이 바로 “구글 기어스”이다. 구글 기어스는 플러인의 형태로 설치되면 구글문서나 지메일, 구글캘린더의 내용을 오프라인과 동기화하여 인터넷이 되지 않는 상황에서도 동기화된 내용만큼은 보고 편집하여 나중에 업데이트하는 형태로 웹앱을 진화시켰다. 하지만 구글 기어스는 그리 오랜시간 지속된 프로젝트는 아니었고, 구글 문서도구 및 지메일의 오프라인 지원은 다시 중단되었다.

웹 스토리지의 시대

HTML5저장소

구글 기어스 프로젝트가 종료된 것은 구글 웹앱과 기어스 자체의 완성도 부족 및 플러그인이 쉽게 배포되지 못하는 문제 등 여러가지 이슈가 있었다. 결국 구글을 비롯한 많은 웹 브라우저 제조사들은 새로이 제정되는 HTML 표준에 웹을 위한 저장소를 포함시키고자 하였으며, 이러한 시도는 HTML5 초기의 저장소 규격이 된다.

하지만 얼마 지나지 않아 이 규격에 대한 정치적인 견해가 엇갈리면서 웹 저장소 기술은 별도의 규격으로 독립한다. 그래서 이걸 계속 HTML저장소라 부르기도 모호하고 브라우저 제조사마다 각각 이름은 좀 다른 것 같다. 하지만 다행스러운 것은 이전과는 달리 거의 모든 웹 브라우저에서 이 로컬 저장소를 제어하는 방식이 완전히 똑같다는 것이다. 또한 무려 이런 새로운 기술들과 별 관계 없어보이는 IE마저도(?) 8.0부터 이 웹 저장소를 지원해왔다.

웹 저장소 사용하기

실제로 웹 저장소는 여러 타입이 있을 수 있다. 세션의 라이프사이클을 따르는 세션 저장소가 있고 우리가 주목하는 로컬 저장소가 있다. 저장소와 관련된 클래스는 Storage가 있으며 이는 window객체에서 찾아볼 수 있다. 우리가 사용하고자 하는 로컬 저장소는 window.localStorage로 찾을 수 있다.

웹 저장소 체크

웹 저장소와 관련된 기능을 사용하려면 브라우저가 웹 저장소를 지원하는지부터 확인해야 한다.

function storageSupport() {

    if(!window.Storage){

        return false;

    }

return true;

}

저장되는 데이터

로컬 스토리지에는 키-값의 짝으로 데이터를 저장하게 된다. 즉 데이터의 종류에 무관하게 저장할 때 문자열로 된 키를 지정해주고 저장한 후 나중에 필요할 때 저장했던 키값을 사용하여 데이터를 불러올 수 있다.

이 때, 데이터는 문자열의 형태로 저장된다. 따라서 데이터를 불러올 때는 원래의

타입으로 다시 변환하여 사용해야 한다. 예를 들어 정수값 10을 저장하면 “10”의 문자열로 저장되며, 이를 다시 parseInt()를 사용하여 원래의 타입으로 변환해야 한다.

또한 저장에 사용되는 키는 단일 도메인 내에서는 유니크해야 한다. 다른 도메인의 키값에 대해서는 접근할 수 없다.

데이터 저장하기

데이터의 저장은 window.localStorage.setItem()메소드를 사용한다. 이 메소드는 2개의 인자를 받는데, 순서대로 키(문자열), 데이터(임의의 포맷)를 받는다.

사용법은 무척이나 간단하다. 단지 위에서 언급한대로 저장소 지원여부를 체크하는 부분만 신경쓰면 된다.

다음은 객체의 id값을 받아 해당 객체의 HTML코드 자체를 저장하는 함수이다.

function saveElement(elemID){

    if(!storageSupport()

    {

        return false;

    }

    window.localStorage.setItem('contentOf_'+elemID,document.getElementByID(elemID).innerHtML);

    return true;

    }

데이터 불러오기

저장된 데이터를 불러오는 것은 getItem()메소드를 사용한다. 이 메소드는 키 만을 인수로 받고 해당 키에 저장된 문자열 값을 리턴한다. 굳이 위의 저장하는 함수와 반대되는 함수를 쓴다면 다음과 같다.

function loadElement(elemID){

    if(!storageSupport()

    {

        return false;

    }

    document.getElementByID(elemID).innerHTML = localStorage.getItem('contentOf_'+elemID);

    return true;

}

그외의 것들

사실 허무하리민치 간단했다. 지난 번 만든 메모앱은 위 두 개의 함수에 대해 키를 누를 때마다 저장하고, 페이지를 로딩할 때마다 저장된 내용을 복원하도록 한 것일 뿐이다.

웹 스토리지는 이 외에도 몇 가지 매우 유용한 기능들을 제공해주는데 꽤 쓸모가 있을 것 같은 것들이다. 이 것들은 다음 글에서 살펴보도록 하자.