Javascript) Web Storage

Web Storage

• 키 밸류 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴
• 쿠키는 한 번 설정하면 이후 모든 웹 요청에 이 쿠키가 포함되어 서버로 전송되지만 웹 저장소에 저장된 데이터는 클라이언트에 존재할 뿐 서버로 전송이 이어지지 않아 네트워크 트래픽을 줄인다. 
• 문자열 기반 데이터 이외에 구조회된 객체를 저장할 수 있다. 
• 쿠키는 하나당 최대 4KB로 한 사이트당 최대 20개까지로 용량 제한이 있지만 웹저장소는 용량제한이 없다. 
• 쿠키는 만료 일자를 지정하여 그 날짜에 제거되고 만약 만료 일자를 지정하지 않으면 세션 쿠키가 된다. 웹저장소는 만료 기간 설정 자체가 없어 한번 저장한 데이터는 영구적으로 저장된다. 

Local Storage

• 명시적으로 지우지 않는 이상 영구적 보관이 가능하다. 
• 도메인마다 별도 로컬 저장소가 생성되어 window 전역 객체의 localstorage에 접근하여 저장 및 조회가 가능하다 
• 브라우저를 종료해도 데이터가 보관되어 다음번 접속에도 그 데이터를 사용할 수 있다. 
• 새로운 탭이나 브라우저에 같은 페이지를 띄우고 이 도메인이 같다면 localstorage가 같다. 

• window.localstorage.getItem("<key>")
  window.localstorage.setItem("<key>","<value>")

Session Storage

• 데이터 지속성과 액세스 범위 제한이 존재한다.
• 현재 브라우징되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지된다. 그래서 브라우저를 끄면 그 데이터도 같이 지워진다. 
• 새로운 탭이나 브라우저는 하나 더 실행시켜서 같은 페이지를 실행한다해도 두 페이지의 session storage는 별개의 영역으로 서로 침범할 수 없다. 

 

---

References

• https://velog.io/@ejchaid/localstorage-sessionstorage-cookie%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90