localStorage와 sessionStorage

웹 스토리지 객체인 localStorage와 sessionStorage는 브라우저 내에 key-value 쌍을 저장할 수 있게 해준다.
이 둘을 사용하면 페이지를 새로고침하거나(sessionStorage의 경우) 브라우저를 다시 실행해도(localStorage의 경우) 데이터가 사라지지 않고 남아있다.
이 두 스토리지 객체는 동일한 메서드와 프로퍼티를 제공한다. 제한용량은 5MB이상인데, 브라우저에 따라 다를 수 있다.

• setItem(key, value) - 키-값 쌍을 보관한다.
• getItem(key) - 키에 해당하는 값을 받아온다.
• removeItem(key) - 키와 해당 값을 삭제한다.
• clear() - 모든 것을 삭제한다.
• key(index) - 인덱스(index)에 해당하는 키를 받아온다.
• length - 저장된 항복의 갯수를 얻는다.

localStorage의 주요 기능

• 오리진(도메인, 프로토콜, 포트로 정의되는 URL)이 같은 경우 데이터는 모든 탭과 창에서 공유된다.
• 브라우저나 OS가 재시작하더라도 데이터가 파기되지 않는다.

sessionStorage의 주요 기능

sessionStorage는 localStorage에 비해 자주 사용되진 않는다. 제공하는 프로퍼티와 메소드는 같지만 훨씬 제한적이기 때문이다.

• sessionStorage는 현재 떠 있는 탭 내에서만 유지된다.
  - 같은 페이지라도 다른 탭에 있으면 다른 곳에 저장된다.
  • 하지만 하나의 탭에 여러 개의 iframe이 있는 경우에는 동일한 오리진에서 왔다고 취급되기 때문에 sessionStorage가 공유된다.
• 페이지를 새로고침할 때 sessionStorage에 저장된 데이터는 사라지지 않는다. 하지만 탭을 닫고 새로 열 때는 사라진다.

참고 사이트
https://ko.javascript.info/localstorage