JS] page간 data 전달하기

Situation]

• 1.ejs -> 2.ejs -> 3.ejs -> 4.ejs -> a.ejs
• 1-1.ejs -> 2-1.ejs -> 3-1.ejs -> 4-1.ejs -> a.ejs

a.ejs 에서 button을 누르면 1.ejs or 1-1.ejs 로 이동해야 하는데, 이 때 4.ejs -> a.ejs 로 온 경우라면, button을 눌렀을 때 1.ejs로 이동해야 하고, 4-1.ejs -> a.ejs 로 온 경우라면, 1-1.ejs로 이동하도록 해야 한다.
x.ejs -> a.ejs 로 이동하는 function 혹은 button function은 javascript로 작성되어 있다.

-> Html data attribute & Localstorage 사용해서 해결함

Html data attribute

reference link: tistory, delfstack, velog

<!-- 4.ejs -->
<input type="text" data-value="a-page" id="page">   

<!-- 4-1.ejs -->
<input type="text" data-value="b-page" id="page">   

Localstorage

reference link: tistory

localStorage is a property that allows JavaScript sites and apps to save key-value pairs in a web browser with no expiration date. This means the data stored in the browser will persist even after the browser window is closed.

/* pageMove.js > moveTutorial() 과 연관됨 */
/* x.ejs -> a.ejs 로 이동하는 부분 */
let pageCheck = document.querySelector("#page").dataset.value;
localStorage.setItem("page", pageCheck);

/* a.ejs -> x.ejs 로 이동하는 부분 */
async function moveTutorial() {
    if (localStorage.getItem("page") == "a-page")  {
        location.href = '/';
    }
    else if (localStorage.getItem("page") == "b-page"){
        location.href = 'b/';
    }
}