로컬 스토리지 (localStorage), JSON

브라우저 상에 데이터를 저장하지 않는 경우, 새로고침 버튼을 누르면 버튼을 누르기 전까지 입력했던 데이터가 초기화되어버린다. 데이터가 중요하거나, 브라우저를 껐다가 켜도 유지되도록 만들고 싶다면 '로컬 스토리지' 기술을 사용해야한다.

웹 스토리지

좀 더 큰 범주인 '웹 스토리지(web storage)'에 대해 먼저 알아보자. 웹 스토리지에는 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)가 있다. 둘은 데이터가 '어떤 범위에서, 얼마나 보존되는지'에 차이가 있다. 간단히 말하면, 로컬 스토리지는 웹페이지 세션이 끝나도 데이터가 지워지지 않지만, 세션 스토리지는 웹페이지의 세션이 끝나면 데이터가 지워진다고 생각하면 된다.

 

세션 : 방문자가 웹 브라우저를 통해 웹 서버에 접속한 시점으로부터 웹 브라우저를 종료함으로써 연결을 끝내는 시점

로컬, 세션 스토리지 둘 다 브라우저 상에 데이터를 저장한다는 점에서는 같은 기능을 하기 때문에 우선은 더 오래 보존되는 '로컬 스토리지'에 대해서만 이야기 해보려고 한다.

 

로컬 스토리지 (localStorage)

웹 스토리지에는 기본적으로 키(key),값(value) 쌍으로 이루어진 데이터를 저장할 수 있다.

• setItem() : key에 데이터 쓰기
• getItem() : key에서 데이터 읽기
• removeItem() : 특정 key의 데이터 삭제
• clear() : 모든 key의 데이터 삭제
• length : 키, 값 쌍 개수 구하기

// 데이터 쓰기 
localStorage.setItem("key", value) 

// 데이터 읽기 
localStorage.getItem("key") 

// 특정 데이터 삭제 
localStorage.removeItem("key") 

// 모든 데이터 삭제 
localStorage.clear() 

// 데이터 개수 
localStorage.length

 

예시를 들어보면, 아래처럼 데이터를 쓸 때는 키(name), 값(jooing) 쌍으로 쓰고, 데이터를 읽을 때는 키(name)만을 이용해 값을 구할 수 있다.

 

localStorage.setItem('name', 'jooing') 
localStorage.getItem('name')
// "jooing"

 

참고로 로컬 스토리지는 문자형(String) 데이터 타입만 지원하기 때문에 숫자를 값으로 사용할 때는 아래와 같은 상황이 발생하지 않도록 주의해야 한다.

 

localStorage.setItem('id', 1) 
// undefined 
localStorage.getItem('id') === 1 
// false 
localStorage.getItem('id') === '1' 
// true

 

로컬 스토리지를 좀 더 응용해보자. 로컬 스토리지에는 키, 값 쌍 뿐만 객체나 배열 데이터도 읽고 쓸 수 있다. 하지만 위에서 언급했듯이 로컬 스토리지는 기본적으로 문자형 데이터 타입만 지원하기 때문에, 객체나 배열을 저장할 때도 문자열로 변환시켜버려서 결과값이 제대로 나오지 않는 것을 볼 수 있다.

 

localStorage.setItem('obj', {name: 'jooing', id: '1'}) 
localStorage.getItem('obj') 
// [object Object]

 

데이터는 대부분 객체 형태로 관리하기 때문에, 로컬스토리지의 이런 문제를 해결할 필요가 있다. 그럼 대체 어떻게 객체나 배열 형태를 읽고쓴다는 것일까? 바로 JSON 형태로 데이터를 읽고 씀으로써 이런 문제를 해결할 수 있다. 간단히 설명하면, JSON은 'Javascript 객체의 형식을 기반으로 만들어진 표현식'이다. 자바스크립트의 객체 문법과 유사하지만, 실제 객체는 아닌 텍스트 형식일 뿐이다. (자세한 설명은 링크 참고) 한마디로 JSON은 형태만 객체, 실체는 문자열이다!

 

JSON : JavaScript Object Notation (JSON)은 Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷입니다. 웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용합니다. 위에서 설명했듯이 JSON은 Javascript 객체 리터럴 문법을 따르는 문자열입니다.

 

localStorage.setItem('obj', JSON.stringify({name: 'jooing', id: '1'})) 
JSON.parse(localStorage.getItem('obj')) 
// {name : 'jooing', id: '1'} 

localStorage.setItem('nums', JSON.stringify([1, 2, 3])) 
JSON.parse(localStorage.getItem('nums')) 
// [1, 2, 3]

 

위의 두 예제 중 위의 세 줄은 객체를, 아래 세 줄은 배열을 로컬스토리지에 읽고쓰는 예제이다.

데이터를 쓰는 부분(setItem)에서 JSON.stringify()는 받은 데이터를 JSON 형태로 직렬화(serialization)해주겠다는 의미이다. 즉 Javascript 객체, 배열을 JSON 문자열로 변환하는 것이다.

이어서 데이터를 읽는 부분(getItem)을 보면 JSON.parse()가 나오는데, JSON 문자열로 변환된 데이터를 분석하여 원래의 JavaScript 값이나 객체를 생성하는 역할을 한다. 역직렬화(desirialization)하는 것인데, 쉽게 말해 Javascript에서의 원본 데이터를 그대로 읽어오는 것이다.

 

데이터 삭제

이렇게 로컬 스토리지에 저장된 데이터는 새로고침을 하거나 웹페이지를 닫아도 사라지지가 않게 되기 때문에 필요없는 데이터는 직접 삭제를 해줘야 한다. 이 때는 이 글의 처음에 언급했던 두 방법을 사용할 수 있다. 특정 부분을 삭제할 때는 removeItem, 모두 삭제할 때는 clear을 사용한다.

 

localStorage.removeItem('obj') 
localStorage.clear()