node.js로 웹서비스 만들기 (13. localStorage)

이번 글은 웹서비스 개발하다보니 백엔드 없이 프론트 간에 데이터를 공유할 수 있는 방법이 필요해 구글링해보았더니 로컬 스토리지라는게 있다고 해서 해당 기능을 사용하여 프론트간 데이터 공유 기능을 구현한 내용을 기록한 글입니다.

 

로컬 스토리지란?

서버의 도움없이 브라우저에 데이터를 저장하는 스토리지로 화면간 데이터가 서로 공유되며 브라우저의 탭이나 창을 닫아도 데이터는 그대로 브라우저에 남아 있습니다. 그러므로 로컬 스토리지를 사용할 때는 반드시 주기적으로 스토리지를 clear해주어야 합니다.

 

로컬 스토리지 사용법

로컬 스토리지는 자료구조의 맵과 같이 key 사용해 value를 저장하는 방식으로 사용법도 이와 매우 유사합니다.

사용법은 아래 예시와 같습니다.

// 데이터 쓰기
localStorage.setItem('contents', value);

// 데이터 읽기
val content = localStorage.getItem('contents');

// 특정키에 해당하는 데이터 삭제
localStorage.removeItem('contents');

// 스토리지에 저장된 모든 데이터 삭제
localStorage.clear();

// 스토리지에 저장된 데이터 수
localStorage.length;

 

localStorage는 오직 문자형 데이터만 지원하므로 문자형 이외의 데이터를 localStorage에 저장하면 읽어왔을 때 저장한 데이터 타입이 아닌 문자형 타입으로 읽어오게 됩니다.

숫자형 데이터를 저장후 읽어온다면 아래 예시와 같이 다시 변경해야 합니다.

var value = 3;
// 저장 시 문자열 타입으로 저장됨.
localStorage.setItem('myKey', value);

// 읽어온 데이터를 숫자형으로 강제 형변환
val newValue = Number(localStorage.getItem('myKey'));

 

localStorage에 JSON 형태로 데이터 저장하기

localStorage에 JSON 형태로 데이터를 저장하게 되면 저장시 강제로 문자형으로 형변환되는 문제를 막을 수 있는 장점도 있지만 그보다는 데이터 오브젝트를 편리하게 저장하고 관리할 수 있다는 장점이 더 큽니다.

개발 중 localStorage에 데이터를 저장한다면 단순히 한두개의 데이터가 아니라 자료 구조형태의 다수의 데이터를 저장해야 하는데 이를 건별로 저장하는 것은 매우 비효율적이기 때문 입니다.

JSON 형태로 데이터를 저장하고 읽어오는 예제 코드는 다음과 같습니다.

// items 갯수만큼 datas array 생성
var datas = [];
$.each(items, function(index, element){
    var data = {
      qid: element.qid,
      type: element.type,
      contents: element.contents,
      createdAt: element.createdAt
    };
    datas.push(data);
});

// SON.stringify() 메소드를 사용해 datas array를 로컬 스토리지에 저장
localStorage.setItem('datas', JSON.stringify(selItems));


// 로컬 스토리지에서 데이터를 읽어옴.
var dataString = localStorage.getItem('datas');

// 문자열 형태로 읽어온 데이터를 다시 자료구조형 array로 변경
// 이렇게 할 경우, 데이터 타입이 그대로 유지됨.
var readDatas = JSON.parse(dataString);

// 사용 완료한 로컬 스토리지는 삭제
localStorage.removeItem('datas');