로컬 스토리지(localStorage) json

 

읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. localStorage는 sessionStorage와 비슷하지만, localStorage의 데이터는 만료되지 않고 sessionStorage의 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라지는 점이 다릅니다.

저장한 자료는 페이지 프로토콜별로 구분합니다.

간단하게 정리를 하자면 브라우저를 껐다가 켜도 유지되도록 만들고 싶다면 '로컬 스토리지' 기술을 사용해야한다.

 

웹 스토리지(Web Storage)

웹 스토리지는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능이다.

웹 스토리지에는 로컬 스토리지(local Storage)와 세션 스토리지(session Storage)가 있다.

둘은 '데이터가 어떤 범위에서, 얼마나 오래 보존되는지'에 차이가 있다.

로컬 스토리지는 웹페이지 세션이 끝나더라도 데이터가 지워지지 않는 반면, 세션 스토리지는 웹페이지의 세션이 끝나면 데이터가 지워진다. 

 

세션은 방문자의 요청에 따른 정보를 방문자 메모리에 저장하는 것이 아닌 웹 서버가 세션 아이디 파일을 만들어 서비스가 돌아가고 있는 서버에 저장을 하는것을 말한다. 또는 일정 시간동안 같은 사용자(정확하게 브라우저를 말한다)로 부터 들어오는 일련의 요구를 하나의 상태로 보고 그 상태를 일정하게 유지시키는 기술이다.

다시 말하자면 방문자의 요청에 따른 정보를 방문자 메모리에 저장하는 것이 아닌 웹 서버가 세션 아이디 파일을 만들어 서비스가 돌아가고 있는 서버에 저장하는 것이다. 서버에 저장되기 때문에 사용자 정보가 노출되지 않는다.

 

로컬 스토리지

로컬 스토리지는 브라우저에 반영구적으로 데이터를 저장하며, 브라우저를 종료해도 데이터가 유지된다. 브라우저 자체에 반영구적으로 데이터가 유지되지만, 도메인 (domain)이 다른 경우에는 로컬 스토리지에 접근할 수 없다.

 

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

 

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

// 항목 하나를 추가한다. (데이터 쓰기)
localStorage.setItem('myCat', 'Tom');

// 위에서 추가한 localStorage 항목을 읽는 법은 아래와 같다. (데이터 읽기)
const cat = localStorage.getItem('myCat');

// 제거 (데이터 제거)
localStorage.removeItem('myCat');

// localStorage 항목의 전체 제거 구문 (모든 데이터 제거)
localStorage.clear();

// 데이터의 개수
localStorage.length

 

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

localStorage.setItem('myname', 'judaeng') 
localStorage.getItem('myname') // "judaeng"

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

localStorage.setItem('num', 1)    // undefined
localStorage.getItem('num') === 1 // false
localStorage.getItem('num')       // "1"
typeof localStorage.getItem('num') //"string"

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

localStorage.setItem('obj', {name: 'judaeng', id: '3'})  // undefined
localStorage.getItem('obj') // [object Object]

데이터는 대부분 객체 형태로 관리하기 때문에, 로컬스토리지의 이런 문제를 해결할 필요가 있다.

그럼 대체 어떻게 객체나 배열 형태를 읽고쓴다는 것일까?

바로 JSON 형태로 데이터를 읽고 씀으로써 이런 문제를 해결할 수 있다.

JSON은 'Javascript 객체의 형식을 기반으로 만들어진 표현식'이다.

자바스크립트의 객체 문법과 유사하지만, 실제 객체는 아닌 텍스트 형식일 뿐이다. (자세한 설명은 링크 참고) 한마디로 JSON은 형태만 객체, 실체는 문자열이다.

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

아래 예시는 객체 및 배열을 로컬 스토리지에 읽고쓰는 예제이다.
데이터를 쓰는 부분(setItem)에서 JSON.stringify()는 받은 데이터를 JSON 형태로 직렬화(serialization)해주겠다는 의미이다. Javascript 객체, 배열을 JSON 문자열로 변환하는 것이다.

데이터를 읽는 부분을(getItem)을 보면 JSON.parse()가 나오는데, JSON 문자열로 변환된 데이터를 분석하여 원래의 JavaScript 값이나 객체를 생성하는 역할을 한다.

역직렬화(desirialization)하는 것인데, 쉽게 말해 Javascript에서의 원본 데이터를 그대로 읽어오는 것이다.

링크를 걸어둔 곳으로 들어가 조금 더 참고할 수 있다.

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

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

 

데이터 청소

로컬 스토리지에 저장된 데이터는 웹페이지를 닫는다고 해서 사라지지 않으므로 불필요한 데이터가 남지 않도록 직접 청소해주는 것이 좋다.

localStorage.removeItem('obj')  // 특정 부분을 삭제한다.
localStorage.clear();		    // 모두 삭제한다.