LocalStorage, SessionStorage, Cookie -Jwt

1. LocalStorage vs. SessionStorage

웹 스토리지 객체인 LocalStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해준다. 

페이지 새로고침(sessionStorage)을 하더라도, 브라우저를 다시 실행해도(localStorage)데이터가 사라지지 않고 남아있다. 웹스토리지 객체는 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않는다.

웹 스토리지 객체는 도메인, 프로토콜, 포트로 정의되는 오리진에 묶여있다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다. 

 

 1) LocalStorage의 주요특징 :

 오리진(도메인, 포트, 프로토콜)이 같은 경우 데이터는 모든 탭과 창에서 공유된다.

 또한, 브라우저나 OS가 재시작하더라도 데이터가 파괴되지 않는다. 

 localStorage의 키와 값은 반드시 문자열이어야한다. JSON을 활용하여 객체를 쓸 수도 있다.

JSON.stringfy

JSON.parse

 

2) sessionStorage의 주요특징 :

 현재 떠 있는 탭 내에서만 유지된다. 같은 페이지라도 다른 탭에 있으면 다른 곳에 저장된다. 

그러나, 하나의 탭에 여러 개의 iframe이 있는 경우엔 동일한 오리진에서 왔다고 취급되기 때문에 sessionStorage가 공유된다. 페이지를 새로 고침할 때 sessionStorage에 저장된 데이터는 사라지지 않는다. 하지만 탭을 닫고 새로 열 때는 사라진다. 

 

https://ko.javascript.info/localstorage

localStorage와 sessionStorage

 

 

https://velog.io/@0307kwon/JWT%EB%8A%94-%EC%96%B4%EB%94%94%EC%97%90-%EC%A0%80%EC%9E%A5%ED%95%B4%EC%95%BC%ED%95%A0%EA%B9%8C-localStorage-vs-cookie

JWT는 어디에 저장해야할까? - localStorage vs cookie