데이터베이스(DB) 서버나 클라우드(Cloud) 플랫폼이 아닌 브라우저를 통해 데이터를 저장하는 기술인 웹 스토리지(Web Storage)에 대해 공부한 내용을 정리해 본다.
웹 스토리지(Web Storage)의 개념
1. 로컬 스토리지(local storage) & 세션 스토리지(Session Storage)
웹 스토리지에는 로컬 스토리지와 세션 스토리지가 있다. 두 스토리지의 차이는 같은 웹 사이트를 여러 탭이나 창에서 열었을 때 로컬 스토리지는 서로의 데이터를 공유하여 저장하는 반면에 세션 스토리지는 각각의 탭과 창 마다 데이터가 격리되어 저장된다는 것이다.
또한 세션이 끝났을 때 로컬 스토리지는 데이터가 그대로 저장되어 있지만 세션 스토리지는 데이터가 지워진다는 차이점이 있다. 단, 로컬 스토리지의 특성은 같은 컴퓨터에서 같은 브라우저를 사용할 때만 적용되는 것임을 유의해야 한다.
2. 쿠키를 이용한 데이터 저장 방식과의 차이
웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않아 쿠키보다 더 많은 자료를 보관할 수 있어 대부분의 브라우저가 최소 2MB 혹은 그 이상의 웹 스토리지 객체를 저장할 수 있도록 해준다. 또한 개발자가 브라우저 내 웹 스토리지 구성 방식을 설정할 수 있다.
쿠키와 또 다른 점은 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다는 것이다. 웹 스토리지 객체 조작은 모두 자바스크립트 내에서만 수행 된다.
웹 스토리지 객체는 도메인·프로토콜·포트로 정의되는 오리진(origin)에 묶여있어 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다.
웹 스토리지(Web Storage) 메소드
웹 스토리지는 일반 객체와 동일하게 key와 value 값을 저장하고 아래와 같은 메소드를 사용한다. 로컬 스토리지와 세션 스토리지는 동일한 메소드를 사용하고 각각 localstorage, sessionstorage라는 키워드만 사용하면 된다.
- setItem(key, value) – key,value 값 보관
- getItem(key) – 키에 해당하는 값을 받아옴
- removeItem(key) – 해당 key, value값 삭제
- clear() – 모든 데이터 삭제
- key(index) – 인덱스(index)에 해당하는 키를 받아옴
- length – 저장된 데이터쌍(key,value)의 값 길이를 받아옴
- Object.keys - 키 전체를 얻음
웹 스토리지(Web Storage) 활용
:: 데이터 타입 사용
웹 스토리지는 문자형(string) 데이터만 지원한다. 숫자형 데이터를 저장하더라도 출력했을 때는 문자형으로 나온다.
localStorage.setItem('num', 100)
localStorage.getItem('num') === 1 // false
localStorage.getItem('num') === "1" // true만약 배열이나 객체 데이터 타입을 사용하고 싶다면 JSON을 사용하면 된다. 로컬 스토리지에 쓸 데이터를 JSON 형태로 직렬화하고, 읽은 데이터를 JSON 형태로 되돌려 원본의 데이터를 그대로 얻는 것이다.
// 객체
localStorage.setItem('json', JSON.stringify({age: 10, height: 150}))
JSON.parse(localStorage.getItem('json')) // {age: 10, height: 150}
// 배열
localStorage.setItem('nums', JSON.stringify([a, b, c]))
JSON.parse(localStorage.getItem('nums')) // [a, b, c]:: key,value 전체 값 얻기
스토리지는 객체이지만 배열처럼 for문을 활용하여 key,value값을 얻어낼 수 있다. 문자열에 사용하기 편리한 for key in localStorage를 사용할 경우 필요하지 않은 내장 필드까지 출력되기 때문에 hasOwnProperty를 이용해 프로토타입에서 상속받은 필드를 골라내거나 Object.keys를 이용해 자기 자신의 키를 받아 순회시키는 방법을 사용한다.
// for문 사용
for(let i=0; i<localStorage.length; i++) {
let key = localStorage.key(i);
alert(`${key}: ${localStorage.getItem(key)}`);
}
// hasOwnProperty 사용
for(let key in localStorage) {
if (!localStorage.hasOwnProperty(key)) {
continue; // setItem, getItem 등을 걸러냄
}
alert(`${key}: ${localStorage.getItem(key)}`);
}
// Object.keys 사용
let keys = Object.keys(localStorage);
for(let key of keys) {
alert(`${key}: ${localStorage.getItem(key)}`);
}