Web Storage

• HTML5 부터 도입된 데이터를 브라우저에 저장할수 있는 저장소
• 키 / 값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회
• 상대적으로 덜 중요한 데이터를 보관
• 문자열(String) 타입만 지원(다른 타입을 넣어도 자동으로 문자열로 변환)
• 같은 오리진 에서만 접근 가능
• 도메인 별 약 5MB 이상의 용량
• Local Storage / Session Storage로 구분

API

• setItem(key, value) – 키-값 쌍을 보관
• getItem(key) – 키에 해당하는 값을 받아옴
• removeItem(key) – 키와 해당 값을 삭제
• clear() – 모든 것을 삭제
• key(index) – 인덱스(index)에 해당하는 키를 받아옴
• length – 저장된 항목의 개수를 받아옴

예시

// window 생략 가능
// setItem
window.localStorage.setItem('키', '값')

// 객체를 사용하고 싶을때
window.localStorage.setItem('user', JSON.stringify({name: '접니다'}))

const obj = {
  name: 접니다,
  age: 31
}
window.localStorage.setItem('user', JSON.stringify(obj))

//getItem
window.localStorage.getItem('키') // '값'
window.localStorage.getItem(JSON.parse('user')) // {name: 접니다}

//removeItem
window.localStorage.removeItem('키') // localStorage.getItem('키') 결과: undefined

//clear
window.localStorage.claer()

//key 순회

for(let i = 0; i < localStorage.length; i++) {
  let key = localStorage.key(i);
  console.log(`${key}: ${localStorage.getItem(key)}`);
}

let keys = Object.keys(localStorage);
for(let key of keys) {
  console.log(`${key}: ${localStorage.getItem(key)}`);
}

// length
window.localStorage.length

Local Storage

• 명시적으로 데이터를 삭제하지 않는이상 영구적으로 보관
  -> 브라우저를 닫고 다시열어도 데이터가 유지

• 도메인만 같으면 전역적으로 데이터 공유

Session Storage

• 현재 페이지가 브라우징 되고 있는 브라우저 컨택스트 내에서만 유지
  -> 브라우저를 닫으면 데이터 삭제

• 도메인이 같더라도 브라우저 탭이 다르면 다른 영역
  -> 똑같은 페이지를 두개 띄워놓고 Session Storage를 확인해보면 각각 별개의 영역을 가짐

Cookie 와 차이점

• 데이터를 서버로 보내지 않는다
  -> 매번 요청시마다 서버로 보내는 쿠키와 달리 Web Storage는 브라우저에만 저장한다(서버 리소스를 아낄수 있다)

• 용량의 차이
  -> 하나의 사이트에서 쿠키의 개수는 20개, 용량은 4kb 제한
  -> Web Storage는 도메인별 5MB 이상

• 객체정보를 저장할 수 있다

• 영구적으로 데이터를 보관가능
  -> Cookie는 만료일자를 설정해야 해서 언젠가 소멸하게 되어 있다