Web Storage
데이터를 브라우저에 보관하는 방법이다. 일종의 데이터 베이스라고 생각하면 된다. Web Storage는 웹 브라우저에 기본적으로 내장되어 있어 있다. 그러므로 별도의 프로그램을 설치할 필요 없이 자바스크립트 내장함수 만으로 접근 가능하다.
로컬 스토리지
로컬 스토리지는
window.localStorage에 위치한다.Key-Value 저장소이기 때문에 Key와 Value를 순서대로 저장하면 된다. 값으로는 문자열, 불린, 숫자, null, undefined 등을 저장할 수 있지만,모두 문자열로 변환된다.키도 문자열로 변환된다.💡 페이지를 새로고침 하거나 컴퓨터를 끄고 다시 접속하더라도 데이터가 그대로 유지된다.
메서드
- localStorage.setItem(key, value
로컬 스토리지에 저장, 존재할 경우 재설정- localStorage.getItem(key)
조회, 값을 꺼냄- localStorage.removeItem(key)
제거- localStorage.clear()
스토리지 전체 제거- localStorage.length
Storage 객체에 저장된 데이터 항목의 수를 반환
// 항목 추가
localStorage.setItem("name", "summer");
localStorage.setItem("birth", 1996);
// 항목 읽기
const name = localStorage.getItem("name"); // summer
const birth = localStorage.getItem("birth"); // 1996 (문자열)
// 항목 제거
localStorage.removeItem("name");
const birth = localStorage.getItem("name"); // null (삭제됨)
// 항목 전체 제거
localStorage.clear();객체 저장하는 방법
로컬스토리지에는 string만 넣을수 있기 때문에 JSON.stringfy로 넣고 JSON.parse로 꺼낸 값을 파싱해서 사용한다.
객체를 통째로 저장, 객체 형식 그대로 문자열로 반환
JSON.stringify
받을 때
JSON.parse
localStorage.setItem('object', JSON.stringify({ key: 'value' }));
const object = JSON.parse(localStorage.getItem('object')); // { key: 'value' }세션 스토리지
세션 스토리지는 window.sessionStorage에 위치한다. clear, getItem, setItem, removeItem, key 등 모든 메소드가 같다. 그러므로 값을 저장하고, 조회하고, 삭제하는 동작 방식은 동일하다. 하지만 로컬 스토리지와는 다르게
데이터가 영구적으로 보관되지는 않는다.
현재 탭 내에서만 데이터가 유지되고, 탭을 닫고 새로 열면 데이터는 사라진다.
sessionStorage.setItem(`key`, `value`)
sessionStorage.getItem(`key`)
sessionStorage.removeItem(`key`)
sessionStorage.clear()
sessionStorage.length🚀 로컬 스토리지와 세션 스토리지의 차이점
👉🏻 데이터의 영구성이다.
로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있다. 하지만 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다. 지속적으로 필요한 데이터(자동 로그인)은 로컬 스토리지에 저장하고, 잠깐 동안 필요한 정보(일회성 로그인 정보 등)은 세션 스토리지에 저장한다. 즉, 로컬 스토리지의 데이터는 만료되지 않고, 세션 스토리지의 데이터는 페이지 세션이 끝날 때 사라진다.
하지만 비밀번호와 같은 중요한 정보는 절대 저장하면 안된다. 클라이언트에 저장하는 것이기 때문에 언제든지 해킹 당할 수 있다.
🚀 쿠키와 웹 스토리지 차이점?
1. 트래픽(속도)
웹 스토리지 > 쿠키
쿠키는 네트워크 요청마다 서버에 전송을 하기 때문에 성능이 떨어지는 원인이 될 수 있다. 반면에 웹 스토리지 저장된 데이터가 클라이언트에만 존재한다. 그렇기 때문에 서버 부담을 줄이고 싶다면 웹 스토리지 사용한다.
2. 용량 제한 차이
웹 스토리지 > 쿠키
쿠키는 한 사이트에 저장 가능한 쿠키는 최대 20개고, 최대 쿠키 크기는 4KB이다. 웹 스토리지는 5MB까지 저장 가능하다. 웹 스토리지는 쿠키보다 용량 제한이 비교적 적다.
3. 저장 형식
쿠키는 text 형식으로 데이터를 저장한다. 웹 스토리지는 문자열 기반 데이터 외에 객체를 저장할 수 있기 때문에 개발 편의성을 향상시킨다.
4. 데이터 저장의 영구성
웹 스토리지는 만료 기간이 없기 때문에 한 번 저장한 데이터를 영구적으로 저장할 수 있다. 쿠키는 만료일을 지정할 수 있지만, 만료일이 지나면 지워진다. 또 만료일을 지정하지 않으면 브라우저 종료시 쿠키를 삭제한다.
참고
