DaleSeo님의 "[자바스크립트]웹 스토리지(localStorage, sessionStorage) 사용법" 글을 그냥 베꼈다고 할 수 있습니다.
개발자 도구 창에서 확인 해볼 수 있는 로컬 스토리와 세션 스토리지가 무엇인지 살펴보자
내가 왜 필요했더라... 🤔
졸업 작품 중 JWT에 대한 정보를 찾던 도중 로그인 성공시에 토큰을 localStorage에 저장하는 코드를 확인했다. 이 localStorage는 어떻게 쓰이고, 어떻게 써야하는지 알아보고 싶어졌다.
JWT에서 localStorage가 쓰이는 예시를 간단하게 알아보자.
로그인 요청시 사용자 정보를 axios.post()방식으로 전달한다.
서버에서 유효한 로그인 정보일 경우 jwt를 발급하여 응답 헤더에 적재하여 전달하면,
해당 응답 헤더 정보를 LocalStorage에 저장한다.
<관련 코드>
const handleLogin = async () => {
if(memberId !== "" && memberPass !== ""){ //member 정보가 미입력 상태면 함수 발동 x
await axios.post('/api/client/login/member', {
memberId: memberId,
memberPass: memberPass
}).then((response) => { //응답결과 정상적으로 넘어온 경우 아래 로직 수행
alert("로그인 성공");
localStorage.setItem("accessToken", response.headers.accesstoken); // 토큰 저장
window.location.href="/"; //메인페이지로 이동
}).catch((err) => { //서버에서 에러가 발생한 경우 경고창 알림
alert(err.response.data.detail);
});
} else{
alert("ID 혹은 비밀번호를 입력하세요."); // member 정보 미입력 시 알림
}
}뭐 저렇게 localStorage.setItem으로 토큰이 저장된다고 한다.
과연 localStorage는 무엇이며, 어떻게 쓰이는지 알아보도록 하자
웹 스토리지(Web Storage)??
웹 스토리지(Web Storage)는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 기능입니다. 데이터의 유실성이 중요하지 않다면 보통 서버에 저장하지 않는다. 그래서 웹 스토리지를 사용한다. 웹 스토리지와 쿠키의 기능 자체는 유사하지만, 쿠키는 약 4KB 까지 밖에 저장 공간을 이용하지 못하는 반면에 웹 스토리지는 약 5MB 까지의 저장 공간을 이용할 수 있습니다.
자세한 웹 스토리지의 최신 스펙은 https://www.w3.org/TR/webstorage/에서 확인할 수 있다.
오늘은 쿠키의 기능이 아닌 웹 스토리지만 알아보도록 하자.
로컬 스토리지(Local Storage) 그리고 세션 스토리지(Sessiong Storage)
웹 스토리지(Web Storage)에는 로컬 스토리지(localStorage)와 세션 스토리지(SessionStorage)가 있습니다. 두 개의 매커니즘의 차이점은 얼마나 오래 보존되냐입니다.
세션 스토리지는 웹 페이지의 세션이 끝날 때 저장된 데이터가 지워지는 반면, 로컬 스토리지는 웹페이지 세션이 종료되더라도 데이터가 지워지지 않습니다.
다시 말해, 브라우저에서 같은 웹 사이트를 여러 탭이나 창에 띄우면, 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장되며, 각 탭이나 창이 닫힐 때 저장해 둔 데이터도 함께 소멸됩니다.
로컬 스토리지는 여러 탭이나 창 간에 데이터가 서로 공유되며 탭이나 창을 닫아도 데이터는 브라우저에 그대로 남습니다.
- 아하! 그래서 로그인 토큰을 세션 스토리지가 아닌 로컬 스토리지에 저장하나 봅니다!
하지만 이러한 로컬 스토리지의 데이터 영속성(persistence) 어디까지나 계속해서 동일한 컴퓨터에서 동일한 브라우저를 사용할때만 해당합니다.
영속성(persistence)은 데이터를 생성한 프로그램의 실행이 종료되더라도 사라지지 않는(비휘발성,non-volatile) 데이터의 특성을 이야기합니다.
즉 같은 컴퓨터에서 다른 브라우저를 사용하거나, 다른 컴퓨터에서 같은 브라우저를 사용하는 경우, 서로 다른 두 개의 로컬 스토리지에 데이터가 저장됩니다.
정리하자면,,
로컬 스토리지와 세션 스토리지의 공통점은 두 기술 모두 데이터를 브라우저 상에서 저장한다는 것이며, 자바스크립트 API가 완전히 동일한 형태입니다. 따라서 로컬 스토리지 기준으로만 예시를 알려준다고 한다. 세션 스토리지를 사용할 때는 예제 코드의 localStorage 부분을 SessionStorage로 대체하면 됩니다.
