Web Storage란, 브라우저 상에 데이터를 저장할 수 있는 기술을 말한다.
DB만큼 큰 용량을 가진건 아니지만 데이터를 저장할 수 있는 저장소를 브라우저에서 지원하는데, 여기엔 localStorage와 sessionStorage가 있고 Cookies도 저장소와 같은 역할을 할 수 있다.
이 두 개의 매커니즘의 차이점은 데이터가 어떤 범위 내에서 얼마나 오래 보존되느냐에 있는데, sessionStorage는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워지는 반면 localStorage는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않는다.
다시 말해, 브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄우면 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장되며, 각 탭이나 창이 닫힐 때 저장해 둔 데이터도 함께 소멸한다.
반면에, 로컬 스토리지의 경우 여러 탭이나 창 간에 데이터가 서로 공유되며 탭이나 창을 닫아도 데이터는 브라우저에 그대로 남아 있다.
LocalStorage, SessionStorage는 HTML5에서 추가된 저장소이며, 데이터 저장 시 key=value의 쌍으로 저장 되고 key를 기반으로 데이터를 조회 한다.
localstorage
현재 출처의 로컬 저장 공간에 접근할 수 있는 Storage 객체
localStorage는 사용자의 로컬에 존재하는 저장소이다.
우리는 이 저장소에 특정 데이터를 저장하거나 수정하거나 삭제할 수 있다.
이를 사용하면 브라우저에 key-value 값을 쌍으로 Storage에 저장할 수 있는데, 예를 들면 페이지를 새로 고침하거나 브라우저를 껐다 켜도 데이터가 사라지지 않고 남아있다.
즉, 세션이 바뀌어도 저장한 데이터가 유지된다는 의미이다.
유사한 것으로는 session storage가 있는데, 이와 달리 로컬스토리지는 유효기간이 존재하지 않는다.
사용법
1. setItem(key, value) - 저장 문법
localStorage.setItem(key, value)localStorage에 item을 추가하기 위해서는 setItem() 함수를 사용한다. setItem 메서드를 통해 key는 dataList, value는 data로 들어간다.
하지만 객체를 바로 저장하게 되면 [Object Object]로 나오는데, storage에 저장된 데이터는 모두 문자열만 사용 가능하기 때문에 value인 data를 문자열로 변환해 주어야 한다. 문자열이 아닌 다른 타입으로 저장 시 정상적으로 저장 되지 않는다.
** 값(value)은 반드시 문자열로 저장됨
문자열 외 다른 타입을 저장하기 위해 일반적으로 JSON메소드를 사용하여 저장한다.
ex)
window.localStorage.setItem('name', 'anna');
window.localStorage.setItem('age', '20');
2. getItem(key) - 가져오기 문법
localStorage의 아이템을 읽기 위해서는 getItem() 함수를 사용합니다.
localStorage.getItem(key)getItem을 통해 해당 키(key)에 있는 데이터(value)들을 불러올 수 있습니다.
단순 문자열을 저장한 경우 한번에 가져올 수 있지만 문자열이 아닌 그 외 타입을 저장 한경우 한단계 더 과정이 필요하다.
ex)
const name = window.localStorage.getItem('name');
const age = window.localStorage.getItem('age');
localStorage에 객체, 배열 저장하기
localStorage에 객체나 배열를 저장하기 위해서는 객체를 문자열로 변환해서 저장해야 하기 때문에 JSON.stringify() 함수를 사용하여 객체와 배열을 JSON 문자열로 변환한다.
ex)
// localStorage에 저장할 객체
const obj = { name : 'anna', age : 20}
// localStorage에 저장할 배열
const arr = [1, 2, 3];
// 객체, 배열을 JSON 문자열로 변환
const objString = JSON.stringify(obj);
const arrString = JSON.stringify(arr);
// setItem
window.localStorage.setItem('person', objString);
window.localStorage.setItem('nums', arrString);
// getItem
const personString = window.localStorage.getItem('person');
const numsString = window.localStorage.getItem('nums');
// JSON 문자열을 객체, 배열로 변환
const personObj = JSON.parse(personString);
const numsArr = JSON.parse(numsString);
// 결과 출력
document.write(personString); // {"name":"anna","age":20}
document.write('<br/>');
document.write(personObj); // [object Object]
document.write('<br/>');
document.write(numsString); // [1,2,3]
document.write('<br/>');
document.write(numsArr); // 1,2,3
document.write('<br/>');
*JSON이란?
JavaScript Object Notation (JSON)은 Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷
웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용(서버에서 클라이언트로 데이터를 전송하여 표현하려거나 반대의 경우)
JSON은 Javascript 객체 리터럴 문법을 따르는 문자열이므로 문자열 형태로 존재 — 네트워크를 통해 전송할 때 아주 유용함.
3. removeItem(key), clear() - 삭제 문법
- localStorage.removeItem(key); 해당 key에 있는 데이터를 모두 삭제
- localStorage.clear(); localStorage에 있는 도메인(key, value)을 모두 삭제
ex)
window.localStorage.removeItem('name');
// removeItem() 함수를 사용하여 key가 'name'인 아이템을 삭제
4. length - 아이템 갯수 구하는 문법
localStorage에 저장된 값의 갯수를 확인
localStorage.length;
ex)
// 초기화
window.localStorage.clear();
// setItem
window.localStorage.setItem('name', 'anna');
window.localStorage.setItem('age', 20);
// localStorage item 갯수
const length = window.localStorage.length
// 결과 출력
document.write(length); // 2
sessionStorage
sessionStorage는 localStorage와 비슷하지만, localStorage의 데이터는 만료되지 않고 sessionStorage의 데이터는 페이지 세션이 끝날 때 제거되는 차이가 있다.
페이지 세션은 브라우저가 열려있는 한 새로고침과 페이지 복구를 거쳐도 남아있다. 같은 URL을 다수의 탭/창에서 열면 각각의 탭/창에 대해 새로운 sessionStorage를 생성한다.
탭/창을 닫으면 세션이 끝나고 sessionStorage 안의 객체를 초기화한다.
sessionStorage 객체는 제공하는 property와 method는 같지만, 훨씬 제한적이기 때문에 localStorage에 비해 자주 사용되진 않는다.
따라서, sessionStorage는 현재 떠 있는 탭 내에서만 유지된다. 같은 페이지라도 다른 탭에 있으면 다른 곳에 저장되기 때문이다. 페이지를 새로 고침할 때 sessionStorage에 저장된 데이터는 사라지지 않지만 탭을 닫고 새로 열 때는 사라진다.
한마디로 정리하면, sessionSrotage는
- 데이터의 세션이 끝나면(브라우저 종료) 데이터가 지워진다.
- 휘발성 데이터를 저장할 때 사용한다.
- session 기간에만 데이터를 저장한다.
- 즉, browser(또는 tab)이 꺼진다면 데이터는 소실된다(보안 측면에서 유리).
window.sessionStorage 객체
세션 쿠키와 달리 탭/윈도우 단위로 세션 스토리지가 생성된다.
서로 다른 세션 스토리지는 서로 영향을 주지 않으며 독립적으로 동작한다.
잠시 동안 필요한 정보를 저장하기에 좋다. (ex. 일회성 로그인, 입력 폼 저장 등)
Cookie
cookies란 웹사이트에 의해 유저의 컴퓨터에 놓이는 작은 텍스트 파일들인데, 최대 4KB의 용량을 가진 매우 작은 양의 데이터이다. 사이트에서 방문한 페이지를 저장하거나 유저의 로그인 정보를 저장하는 등 다양한 방법으로 사용되며, 문자열만 저장할 수 있다는 제한이 있다.
많은 보안 웹사이트들은 로그인을 한 후 Cookies를 사용해 유저의 신원을 확인하여 모든 페이지에서 재인증을 거치지않아도 되게 된다.
또 다른 용도는 사이트에서 제한된 인터넷 사용 기록을 기반으로 사용자 경험을 개선하는 것이다.
Cookies의 유형
Cookies는 두 가지 유형이 있는데,
persistent cookies와 session cookies이다.
Seesion cookies는 만료일을 포함하지 않는 대신에 브라우저나 탭이 열려있는 동안에만 저장되고, 브라우저가 닫히면 cookies는 영구적으로 삭제된다. 이 유형의 cookies는 은행 웹사이트 내에서 작업을 하고 있다가 탭을 닫으면 모든 정보를 잊어버리기 때문에 은행 유저들의 자격 증명을 저장하는데 사용될 수 있다.
Persistent cookies는 만료일을 가진다. 이 cookies는 만료일까지 유저의 디스크에 저장되고 만료일이 지나면 삭제된다. 유저들이 방문할때마다 사용자 경험을 커스텀하기 위해 특정 웹사이트에서 행동을 기록하는 등 여러 활동들에 사용될 수 있다.
localStorage와 Cookies의 차이점
HTML5가 나온 이후, LocalStorage는 cookies보다 더 많은 장점이 있기 때문에 cookies의 많은 사용 방법들은 LocalStorage의 사용으로 대체되었다.
가장 중요한 차이점 중 하나는 cookies와는 달리 모든 HTTP 요청에서 데이터를 주고받을 필요가 없다는 것이다.
HTTP 요청에서 데이터를 주고받지 않고 LocalStorage를 이용하면 클라이언트와 서버간의 전체 트래픽과 낭비되는 대역폭의 양을 줄일 수 있다.
데이터가 유저의 로컬 디스크에 저장되어 있으면 인터넷이 끊어져도 데이터가 삭제되거나 지워지지 않기 때문이다.
또한 앞에서 언급했듯이 LocalStorage는 최대 5MB의 정보를 저장할 수 있으며, 이것은 cookies가 보유할 수 있는 4KB보다 훨씬 더 많다.
LocalStorage의 만료 조건은 persistent cookies처럼 동작한다. Javascript 코드를 통해 삭제하지 않으면 데이터는 자동으로 삭제되지 않는다.
이 방식은 더 오랜 시간동안 저장해야하는 큰 데이터에 유용하다. 또한 LocalStorage를 사용하면 문자열 뿐만 아니라 object도 저장할 수 있다.
정리!
cookies는 더 작고 모든 HTTP 요청과 함께 서버 정보를 다시 전달해주지만, LocalStorage는 더 크고 클라이언트 측에 정보를 보유할 수 있다.
Web Storage의 특징(Cookies와의 차이점)
쿠키는 매번 서버로 전송된다.
웹 사이트에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키 정보를 포함하여 서버로 전송된다.
Web Storage는 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송은 이루어지지 않는다.
이는 네트워크 트래픽 비용을 줄여 준다.
단순 문자열을 넘어 객체정보를 저장할 수 있다.
문자열 기반 데이터 이외에 체계적으로 구조화된 객체를 저장할 수 있다는 것은 개발 편의성을 제공해주는 주요한 장점이 된다(브라우저의 지원 여부를 확인해 봐야 함).
용량의 제한이 없다.
쿠키는 개수와 용량에 있어 제한이 있다.
하나의 사이트에서 저장할 수 있는 최대 쿠키 수는 20개이다. 그리고 하나의 사이트에서 저장할 수 있는 최대 쿠키 크기는 4KB로 제한되어 있다. 그러나 Web Storage에는 이러한 제한이 없다.
영구 데이터 저장이 가능하다.
쿠키는 만료일자를 지정하게 되어 있어 언젠가 제거된다. 만료일자로 지정된 날짜에 쿠키는 제거되는 것이다.
만약 만료일자를 지정하지 않으면 세션 쿠키가 된다.
만일 영구 쿠키를 원한다면 만료일자를 굉장히 멀게 설정하여 해결할 수 있다.
WebStorage는 만료기간의 설정이 없다. 즉, 한번 저장한 데이터는 영구적으로 존재하는 것이다.
