오늘은 sessionStorage를 활용해서 페이지에 처음 접속했을 때만 알림을 띄우는 기능을 구현해봤다. 기존 프로젝트에 약간의 문제가 있었는데 그 중 가장 거슬리는 점은 페이지를 새로고침할 때마다 알림이 계속해서 나타난다는 것이었다.
문제 정의📝
이전에 만들었던 프로젝트에서 서울의 미세먼지 농도를 보여주는 알림을 추가했었다.
하지만 문제는 이 알림이 새로고침하거나 특정 버튼을 누를 때마다 계속 표시된다는 것이었다. 예를 들어, 아래처럼 추억을 기록하는 버튼을 눌러 사진을 저장하려고 하면 window.location.reload() 코드가 실행되어 페이지가 새로고침되며 또다시 알림이 뜬다.
개인적으로 이 부분이 너무 불편하다고 느껴져서 개선하기 위해 해결 방법을 찾아보기로 했다.
현재 코드
현재 코드는 아래와 같다. fetch를 통해 데이터를 받아오고, 알림을 띄우는 방식으로 동작한다.
fetch(url)
.then((res) => res.json())
.then((data) => {
let mise = data["RealtimeCityAir"]["row"][0]["IDEX_NM"];
$("#msg").text(mise);
alert(`현재 서울의 미세먼지: ${mise}`);
});이 코드는 매번 페이지가 새로고침될 때마다 alert가 표시되도록 작성되었다.
localStorage와 sessionStorage
이 문제를 해결하는 방법은 생각보다 간단했다. localStorage나 sessionStorage를 사용하면 된다.
localStorage: 데이터를 브라우저에 저장하며 브라우저를 닫아도 데이터가 유지된다. 동일한 브라우저의 여러 탭들 사이에서 데이터를 공유할 수 있다.
sessionStorage: 데이터가 세션(현재 탭) 동안에만 유지된다. 즉, 새로고침에는 유지되지만 탭을 닫으면 데이터가 삭제된다.
내가 원했던 동작은 페이지를 나갔다가 다시 접속하면 알림이 뜨도록 하는 것이었기 때문에 sessionStorage를 사용하기로 했다.
sessionStorage를 사용한 코드 구상
1. 새로운 키를 생성한다.
2. 키의 값을 확인한 뒤 아래처럼 조건에 따라 동작하게 한다:
- 키의 값이 없으면 → 알림을 띄운다. 이후 값을 true로 설정한다.
- 키의 값이 true이면 → 알림을 띄우지 않는다.
이 방식을 코드에 적용하면 아래와 같은 최종 코드가 완성된다.
fetch(url)
.then((res) => res.json())
.then((data) => {
let mise = data["RealtimeCityAir"]["row"][0]["IDEX_NM"];
$("#msg").text(mise);
if (!sessionStorage.getItem("alertShown")) {
alert(`현재 서울의 미세먼지: ${mise}`);
sessionStorage.setItem("alertShown", "true");
}
});최종적으로 구현한 코드를 통해 얻은 효과
- 페이지를 새로고침해도 알림이 다시 나타나지 않는다.
- 페이지를 나갔다가 다시 접속하면 알림이 뜬다.
- 이렇게 간단한 수정만으로도 사용자 경험을 대폭 개선할 수 있었다.
오늘 배운 것들
- localStorage와 sessionStorage의 차이점
- sessionStorage를 활용한 간단한 데이터 저장 및 활용 방법
