localStorage와 sessionStorage는 모두 웹 브라우저에 데이터를 저장하기 위해 사용되는 웹 스토리지 객체(Wek Storage Object)이다.
이 두 개를 사용하면 페이지를 새로고침하거나 심지어 탭을 닫고 열어도 데이터가 유지되도록 할 수 있다.
localStorage와 sessionStorage는 개발자도구(F12)를 열고 애플리케이션 탭 내의 저장용량에서 확인할 수 있다.
localStorage
localStorage는 데이터를 웹 브라우저에 저장하며, 웹 브라우저를 종료하고 재시작하여도 데이터가 웹 브라우저에 저장되어 있다.
localStorage는 다크 모드를 설정 후 재방문 시 설정 유지, 자동로그인 등에 사용된다.
localStorage 사용 예제
데이터 저장
localStorage.setItem("myCat", "Tom");이때, 각 데이터 항목은 키와 값으로 구성되어 있으므로 myCat이 key, Tom이 value이다.
이때 주의점은 문자열만 지원한다.
데이터 불러오기
const cat = localStorage.getItem("myCat");데이터 삭제(key 이용)
localStorage.removeItem("myCat");데이터 삭제(전체 삭제)
localStorage.clear();이전에 진행한 프로젝트에서 localStorage를 사용한 경험이 있어서 그 때의 코드를 조금 가져왔다.
// login.js
const login = async () => {
if (!cnt++) {
await getAccessToken();
const res = await getUser();
const id = res.id;
const name = res.name;
const avatar = res.avatar;
setId(id);
setName(name);
setAvatar(avatar);
localStorage.setItem("id", id);
localStorage.setItem("name", name);
localStorage.setItem("avatar", avatar);
}
};
위 코드는 로그인 과정에서 받아온 사용자의 id, 이름, 프로필 사진을 locaStorage에 저장하는 코드이다.
// header.js
const checkIsLogin = async () => {
const loggedIn = await checkTokenValid();
if (loggedIn) {
setSrc(localStorage.avatar);
setUserId(localStorage.id);
setUserName(localStorage.name);
} else {
localStorage.removeItem("id");
localStorage.removeItem("name");
localStorage.removeItem("avatar");
}
setIsLogin(loggedIn);
};
const handleCloseUserMenu = async () => {
const res = await axios.post(
process.env.REACT_APP_SERVER_URL + "/auth/github-logout",
"",
{ withCredentials: true },
);
setIsLogin(false);
localStorage.setItem("id", "guest");
localStorage.setItem("name", "guest");
localStorage.setItem("avatar", "");
setUserId(localStorage.getItem("id"));
setUserName(localStorage.getItem("name"));
setSrc(localStorage.getItem("avatar"));
setAnchorElUser(null);
};
위 코드는 로그인 토큰을 받아올 수 있는지 확인하고, 로그인이 되어 있을 경우 사용자의 id, 이름, 프로필 사진을 받아오고 그렇지 않을 경우 localStorage에 있는 사용자의 id, 이름, 프로필 사진을 삭제한다.
이후 로그아웃을 해 setIsLogin이 false일 경우 게스트 상태로 두기 위해 이름과 아이디를 게스트로 설정하고, 프로필 사진을 설정하지 않는다. (임의로 다른 데이터를 저장한다.)
if (loggedIn) {
setSrc(localStorage.avatar);
setUserId(localStorage.id);
setUserName(localStorage.name);위 코드에서 예제와 다르게 사용된 문법이 있어서 의아할 수 있는데, loacStorage의 키를 얻거나 설정할 때 일반 객체와 유사한 방법을 사용할 수 있다.
// 일반 객체처럼 사용하기
// 키 설정하기
localStorage.test = 2;
// 키 얻기
alert( localStorage.test ); // 2
// 키 삭제하기
delete localStorage.test;그러나 하위 호환성 때문에 위와 같은 방법이 지원되기는 하지만, length,toString 등의 내장 메서드를 키로 사용할 수 있기 때문에 추천하지 않는다. 이는 getItem,setItem은 정상적으로 작동하더라도 일반 객체처럼 다룰 때 아래처럼 TypeError가 발생할 수 있다.
// 오류 예시
let key = 'length';
localStorage[key] = 5; // TypeError: Cannot assign to read only property 'length'...sessionStorage
sessionStorage는 데이터를 웹 브라우저에 저장하나, 웹 브라우저를 종료할 때 데이터가 삭제된다.
sessionStorage는 현재 떠 있는 탭 내에서만 유지된다.
- 같은 페이지라도 다른 탭에 있으면 다른 곳에 저장되기 때문이다.
- 그러나 하나의 탭에 여러 개의 iframe이 있는 경우에는 동일한 오리진에서 왔다고 취급되기 때문에 sessionStorage가 공유된다.
- 새로고침의 경우 새로고침 자체가 세션이 바뀌는 것은 아니기 때문에 데이터가 유지된다.
sessionStorage는 회원 가입 도중 새로고침을 해도 입력한 정보가 남아있도록 하는 등의 예시가 있다.
sessionStorage 사용 예제
sessionStorage와 localStorage는 동일한 문법을 사용한다.
데이터 저장
sessionStorage.setItem("key", "value");이때 주의점은 sessionStorage 또한 문자열만 지원한다.
데이터 불러오기
let data = sessionStorage.getItem("key");데이터 삭제(key 이용)
sessionStorage.removeItem("key");데이터 삭제(전체 삭제)
sessionStorage.clear();위에서 sessionStorage를 사용하는 예시로 회원가입과 같이 브라우저를 새로고침해도 내용이 유지되는 경우가 있었다. 이런 경우에 사용하는 예제는
// 텍스트 필드 가져오기
let field = document.getElementById("field");
// 자동 저장 값이 있는지 확인
// (페이지를 새로 고침한 경우에 해당)
if (sessionStorage.getItem("autosave")) {
// 텍스트 필드 내용 복원 (get)
field.value = sessionStorage.getItem("autosave");
}
// 변경 사항 불러오기
field.addEventListener("change", () => {
// sessionStorage에 결과 저장 (set)
sessionStorage.setItem("autosave", field.value);
});둘의 공통점과 차이점 정리
공통점
- 두 개 모두 데이터를 웹 브라우저 상에 저장한다.
- 각 데이터 항목은 키(key)와 값(value) 쌍으로 저장되어 있다.
- 자바스크립트 API가 동일한 형태이다 .
- 서버로 데이터가 전송되지 않는다.
(이는 밑에 설명할 cookie와의 차이점이다)- 데이터 만료 기간을 설정할 수 없으며, 영구적으로 데이터가 저장되기 때문에 삭제를 위해서는 직접 삭제해야 한다.
(이것도 밑에 설명할 cookie와의 차이점이다)
차이점
- localStorage는 브라우저를 닫아도 데이터가 유지되나, sessionStorage는 브라우저를 닫을 때 데이터를 삭제한다.
즉, 데이터가 어떤 범위 내에서 얼마나 오래 보존되느냐가 가장 큰 차이점이다.- localStorage와 달리 sessionStorage는 브라우저끼리 공유가 불가능하다.
cookie와 차이점
cookie
쿠키는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각으로, 브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송한다.
간단하게 말해서, 만료 기간이 있는 클라이언트 단에 저장하는 작은 텍스트 파일이다.
쿠키의 라이프타임
쿠키는 스토리지 객체와 다르게 라이프타임을 정의할 수 있다.
- 세션 쿠키 : 현재 세션이 끝날 때 삭제된다. 브라우저는 "현재 세션"이 끝나는 시점을 정의하며, 어떤 브라우저들은 재시작할 때 세션을 복원해 세션 쿠키가 무기한 존재할 수 있도록 한다.
- 영속적인 쿠키 : Expires 속성에 명시된 날짜에 삭제되거나, Max-Age 속성에 명시된 기간 이후에 삭제된다.
영속적인 쿠키 설정 예시
Set-Cookie: id=a3fWa; Expires=Wed, 11 Apr 2024 07:28:00 GMT+9;cookie와 차이점
- localStorage와 sessionStorage는 넉넉한 저장 용량을 가지고 있으나(모바일 2.5mb, 데스크탑 5~10mb), cookie는 데이터 저장 용량이 작다.(4kb)
- localStorage와 sessionStorage와 다르게 cookie는 서버에 접근할 수 있다.
- localStorage와 sessionStorage와 다르게 cookie는 매번 데이터가 서버에 HTTP 요청시 같이 전달된다.
- cookie는 TTL(Time-to-Live)에 따라 만료 시점을 정할 수 있다.
리뷰
몰랐던 부분과 더 공부해보고 싶은 부분
localStorage만 사용해보고 sessionStorage는 사용해 본 경험이 없어서 잘 몰랐는데, 이번 기회에 어떨 때 사용하는지/사용법을 배우게 되었다. 또한 localStorage를 사용할 때 guest를 사용했기 때문에 removeItem를 사용할 필요가 없었는데, remove가 필요한 이유를 생각하며 localStorage가 데이터 만료 기간을 설정할 수 없다는 것을 다시 생각하게 되었다.
공부하면서 든 생각
이렇게 비슷한 개념들을 공부할 때는 차이점이 무엇인지 확실히 알고 넘어가는 게 중요한 것 같다,,,, 앞으로 이론 공부 열심히 해야지
참고한 문서
mdn localStorage
mdn sesstionStorage
mdn cookie
javascript info
loginradius blog
