브라우저 저장소

SessionStorage : 임시 저장소

• SessionStorage는 데이터가 지속적으로 보관되지 않는다.
• 데이터의 지속성과 액세스 범위에 특수한 제한이 존재한다.
• SessionStorage는 windows 전역 객체의 SessionStorage라는 컬렉션을 통해 저장과 조회가 이루어진다.
• 현재 페이지가 브라우징되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지된다.
• SessionStorage는 브라우저가 종료되면 데이터도 같이 지워진다
• SessionStorage 역시 Web Storage의 기본 보안 처럼 도메인별로 별도로 생성된다.
• 여기 더불어 SessionStorage는 같은 사이트의 같은 도메인이라 할지라도 브라우저가 다르면 서로 다른 영역이 된다. 브라우저 컨텍스트가 다르기 때문이다.
• 탭 브라우징이나 브라우저를 하나 더 실행해서 같은 페이지를 실행했을 때, 이 두 페이지의 SessionStorage는 각각 별개의 영역으로 서로 침범하지 못한다는 의미이다.
• 이는 도메인만 같으면 전역적으로 공유 가능한 LocalStorage와 구분되는 특징이다.

 

SessionStorage는 세션 종료 시(브라우저를 닫을 경우) 데이터가 삭제됩니다.
SessionStorage는 window.sessionStorage에 저장됩니다.

LocalStorage와 마찬가지로 도메인 마다 각각의 SessionStorage가 존재합니다.
LocalStorage와 동일하게, setItem(key, value), getItem(key), removeItem(key), clear() 이렇게 4가지 종류의 메서드가 있습니다.

SessionStorage도 key-value 형태로 데이터가 저장되며, key와 value 모두 문자열 형태로 저장되기 때문에, LocalStorage와 동일하게 객체를 저장해야 할 경우 JSON.stringify를 사용하여 저장되어야 합니다.

 

 

LocalStorage : 영구 저장소

• 저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관이 가능하다.
• 앞서 말한대로 도메인마다 별도로 LocalStorage가 생성된다.
• Windows 전역 객체의 LocalStorage라는 컬렉션을 통해 저장과 조회가 이루어진다.
• 브라우저를 종료해도 데이터는 보관되어 다음번 접속에도 그 데이터를 사용할 수 있다
• cookie를 그래서 LocalStorage에 넣어 놓는다.
  • cookie는 만료일을 저장해놓고 사용하기 때문

 

LocalStorage는 데이터를 인위적으로 지우기 전까지 계속 저장되기 때문에 사용자 개인정보 등 민감한 정보를 LocalStorage에 저장하는 것은 피해야 합니다.

LocalStorage는 window.localStorage에 저장되고, 도메인 마다 각각의 LocalStorage가 존재합니다.

LocalStorage의 메서드는 setItem(key, value), getItem(key), removeItem(key), clear() 이렇게 4가지 종류가 있습니다.

• setItem(key, value): key 값을 key로 하여 value를 저장합니다.
• getItem(key): key 값으로 저장된 value를 가져옵니다.
• removeItem(key): key 값으로 저장된 데이터를 삭제합니다.
• clear(): 전체 로컬 스토리지를 삭제합니다.

 

LocalStorage는 key-value 형태로 데이터가 저장되는데, key와 value 모두 문자열 형태로 저장됩니다.

localStorage.setItem('number', 1234);
localStorage.getItem('number') // '1234'
localStorage.setItem('object', {});
localStorage.getItem('object') // '[object Object]'

LocalStorage에 저장될 때 toString 메서드가 호출된 형태로 저장됩니다.

객체를 그대로 LocalStorage에 저장할 경우 toString 메서드가 호출된 형태인 [object 생성자] 형태로 저장되기 때문에, 객체를 LocalStorage에 저장해야 할 경우 JSON.stringify를 사용하여 저장되어야 합니다.

 

cookie

cookie는 본연의 역할이 있기 때문에 스토리지로 사용하지 않는 것이 좋습니다.

그리고 cookie는 HTTP 요청이 있을 때마다 외부로 함께 전달되기 때문에 데이터를 조금만 저장해도 소모하는 전체 데이터 양이 급격하게 늘어날 수 있습니다.

cookie는 비동기로 동작하지만 웹 워커에서는 접근할 수 없으며, LocalStorage나 SessionStorage와 마찬가지로 문자열만 저장할 수 있습니다.

 

 

ref

https://han41858.tistory.com/54