[JS]페이지가 넘어가도 변수를 유지하고 싶을 때 / localStorage 작동 안될 때

웹 개발을 하다보면, 웹사이트의 이전 페이지에서 변수를 받아와 다음 페이지에서 처리해야 하는 경우가 생긴다. 이런 경우 여러가지 방법을 쓸 수 있겠으나 오늘은 가장 간단한 방법인 웹 스토리지(localStorage)를 사용하는 방법을 알아보겠다.

1. 웹 스토리지 ㅡ localStorage란?

웹 스토리지는 브라우저가 해당 HTML 문서에 대해 갖고 있는 데이터 저장소이다. 저장된 데이터의 유지 기간에 따라 localStorage와 sessionStorage로 나뉘게 되는데, 차이점은 아래와 같다.

종류	지속 조건
localStorage	동일 기기, 동일 브라우저인 경우 영속
sessionStorage	한 세션 동안 영속 (페이지 닫을 시 소멸)

이런 지속 조건을 잘 생각하여 적절하게 사용해야 하며, 이런 조건을 뛰어넘어 데이터를 저장해야 한다면 데이터베이스 서버를 따로 사용해야 한다.
이외에도 쿠키(Cookie)를 사용하는 방법 등이 있다.

2. localStorage에 데이터 쓰기/읽기

localStorage에는 키-값 쌍의 형태로 데이터를 저장할 수 있다.

// 데이터 쓰기
localStorage.setItem("key", value);

// 키의 값 읽기
localStorage.getItem("key");

// 데이터 삭제
localStorage.removeItem("key");

// 모든 데이터 삭제
localStorage.clear();

주의할 점은 이러한 방식으로 localStorage에 데이터를 저장할 경우 일괄 문자열 타입으로 저장된다. 따라서 데이터 통신 시 json 형식으로 주고 받을 경우 데이터를 쓰고 읽을 때 json 형식으로 써주어야 한다.

> localStorage.setItem('key', JSON.stringify({a: 1, b: 2}))
> JSON.parse(localStorage.getItem('json'))

3. localStorage에 변수 저장이 안될 때

이것때문에 이런 저런 삽질을 해봤는데, 문제상황은 아래와 같았다.

맨 처음 코드는 이렇게 id값을 구하는 함수, 페이지 이동 함수를 따로 구현하여 event 발생 시 함수를 실행하는 형식이었다. 테스트를 위해 페이지 이동 기능은 잠시 주석처리한 상태였다.

// contact 버튼 클릭 시 강사 id값 구하는 함수
function getInstrIdx() {
    var clicked_button_id = $("button.contact").parents("div.profile_card").attr("id");
    localStorage.setItem('instrIdx', clicked_button_id);
}

// request 페이지로 이동
function contact_link() {
    getInstrIdx();
    console.log("localStorage.getItem(\"instrIdx\") : " + localStorage.getItem("instrIdx"));
    // location.href='./request.html';
}

// contact 버튼 클릭 시 instrIdx 넘겨주고 request 페이지로 이동
$(function() {
    $("button.contact").click(contact_link);
});

콘솔에서 제대로 변수가 저장된 것을 확인되었다.

이후 이동할 request.js 파일 코드는 이러했다.

Ref.
https://www.daleseo.com/js-web-storage/