웹 스토리지(web storage)란
서버가 아닌 웹 브라우저 상에 존재하는 데이터 저장소를 의미한다.
데이터를 저장할 때는 보통 데이터베이스에 저장을 하는데 이곳이 아닌 웹 스토리지에 저장하는 이유는 데이터가 중요하지 않거나 소멸되어도 크게 상관없는 데이터를 저장할 때 사용한다. 왜냐하면 이러한 정보들까지 데이터베이스에 저장하게 되면 낭비일 수가 있고 이러한 데이터가 많아지면 서버 성능에 무리를 줄 수 있기 때문이다.
웹 스토리지의 종류
웹 스토리지에는 localStorage와 sessionStorage가 있다
공통점
-
브라우저 상에 데이터를 저장한다.
-
자바스크립트 api가 동일하게 사용된다.
localStorage
브라우저 내에서 하나의 로컬스토리지를 공유하기 때문에 탭이나 창을 닫아도 등록된 데이터는 로컬스토리지에 그대로 유지된다.
sessionStorage
탭 별로 독립적으로 관리되고 탭이나 창을 닫으면 데이터가 소멸된다.
웹 스토리지 api
// 데이터 저장
localStorage.setItem('key', 'value')
// 데이터 참조
localStorage.getItem('key')
// 특정 데이터 제거
localStorage.removeItem('key')
// 전체 데이터 제거
localStorage.clear()
// 저장된 데이터 개수
localStorage.length주의사항
웹 스토리지를 사용할 때 주의사항은 웹 스토리지는 문자열 데이터 타입만 지원한다. 따라서, 문자열 데이터가 아닌 데이터를 저장하면 암묵적으로 문자열 형태로 변환되어 저장된다.
localStorage.setItem('a', 10)
typeof localStorage.getItem('a') // 'string'따라서, 웹 스토리지에 데이터를 저장할 때는 문자열 형태로 변환하여 저장해야 하는데 이를 위해 많이 사용되는 문자열 형식이 JSON(자바스크립트의 객체 형태로 구조를 이루며 데이터를 표현하기 위한 텍스트 기반의 데이터 포맷)이다.
stringify()와 .parse()라고 하는 JSON 메서드로 JSON 형태로 직렬화하거나 원본 데이터 형태로 역직렬화할 수 있다.
// JSON 형태로 직렬화
localStorage.setItem('obj', JSON.stringify({ name: 'Lee' }))
// JSON 형태에서 원본데이터로 역직렬화
JSON.parse(localStorage.getItem('obj')) // { name: 'Lee' }