로그인관련 실습시 accessToken을 로컬스토리지에 저장해 accessToken 여부를 판단해 권한분기 작업을 진행했다.
브라우저에 저장하는 방법의 경우 3가지가 있다.
cookie, localStorage, sessionStorage
브라우저 저장소 간단요약
cookie : 껏다 키거나 새탭을 열어도 정보가 안사라지고 보내는 api 요청마다 쿠키가 따라다닐수 있음
localStorage : 껏다 키거나 새탭을 열어도 정보가 안사라짐
sessionStorage : 껏다 키거나 새탭을 키면 정보가 사라짐
각각의 특징에 맞게 사용하면 된다.
스토리지 저장 및 콘솔 값 찍어보기
예제코드
export default function BrowserStoragePage() { function onClickSaveCookie() { document.cookie = "aaa = 철수"; } function onClickSaveLocalStorage() { localStorage.setItem("bbb", "영희"); } function onClickSaveSessionStorage() { sessionStorage.setItem("ccc", "훈이"); } function onClickGetCookie() { // console.log("myCookie", document.cookie); const temp = document.cookie .split("; ") .filter((el) => el.startsWith("zzz="))[0]; console.log(temp.split("=")[1]); } function onClickGetLocalStorage() { const asdf = localStorage.getItem("bbb"); console.log("로컬스토리지 : ", asdf); } function onClickGetSessionStorage() { const asdfg = sessionStorage.getItem("ccc"); console.log("세션스토리지 : ", asdfg); } return ( <div> <button onClick={onClickSaveCookie}>쿠키에 저장하기</button> <button onClick={onClickSaveLocalStorage}>로컬스토리지에 저장하기</button> <button onClick={onClickSaveSessionStorage}> 세션스토리지에 저장하기 </button> ====================================================================== <br /> <button onClick={onClickGetCookie}>쿠키에 있는 값 가져오기</button> <button onClick={onClickGetLocalStorage}> 로컬스토리지에 있는 값 가져오기 </button> <button onClick={onClickGetSessionStorage}> 세션스토리지에 있는 값 가져오기 </button> </div> ); }
cookie 값 저장하는 방법
document.cookie 방식으로 저장하며 key, value 값을 "key === value" 방식으로 저장한다.저장 예시 document.cookie = "aaa = 철수";
localStorage, sessionStorage 저장하는 방법
localStorage와 sessionStorage 사용방법은 동일하며 setItem을 사용해서 저장소에 저장한다.저장 예시 localStorage.setItem("bbb", "영희"); sessionStorage.setItem("ccc", "훈이");
스토리지값 사용해보기(콘솔찍기)
cookie값 사용해보기(콘솔찍기)
위에서 cookie에 저장한 값을 사용하려면 cookie값을 가공해줘야 한다.사용예시 const temp = document.cookie .split("; ") .filter((el) => el.startsWith("zzz="))[0];
이렇게 정의후 temp를 콘솔로 찍어보면
value 값이 나온다.
저장되는 방식이 조금 다르기에 split, fliter 를 사용해서 표현했으며 상황에 따라서 다르게 표현할수 있다.
localStorage, sessionStorage 저장하는 방법
localStorage, sessionStorage 모두 getItem을 사용해서 값을 불러온다.사용예시 const asdf = localStorage.getItem("bbb"); console.log("로컬스토리지 : ", asdf); const asdfg = sessionStorage.getItem("ccc"); console.log("세션스토리지 : ", asdfg);
value 값이 이렇게 출력된다.
각각의 저장소마다 활용되는 경우가 다르니 저장되는 방식, 사용방식에 대하여 많이 사용해봐야 겠다.