Web Storage (Local Storage vs Session Storage)

Web Storage

• Local Storage 와 Session Storage 가 존재
  - 데이터가 어떤 범위 내에서 얼마나 오래 보존되느냐의 차이
• 대부분 브라우저 모두 2MB 이상의 데이터 저장 가능
• http header를 통한 조작이 불가능
• 서버로 전송되지 않음
• domain/protocol/port 로 구성
  • = domain, port가 같아도 protocol이 다르면 해당 데이터에 접근이 불가능
• 따라서 서버로 전송하지 않아도 되는 임시 저장 데이터들을 관리/사용하는데에 적합함.

// web storage의 데이터가 변경될 때, ‘storage’ event가 발생됨.
window.addEventListener('storage', (e) => console.log(e))

1) Local Storage

• origin(domain,port,protocol)이 같은 경우 여러탭과 창에서 공유
• 세션 이후에도 지속되는 저장소용으로 설계됨
• 컴퓨터를 종료하거나 브라우저를 종료해도 지속

2) Session Storage

• 한 탭에서 페이지의 세션이 유지되는 동안 origin 별로 스토리지를 관리
• 페이지가 열려있는 동안이나 리로딩 또는 복원시 데이터 유지
• 다른 세션이나 창이 종료되는 경우 데이터에 접근 불가능
• local storage 보다 좀 더 제한적으로 사용됨