본문 바로가기

웹 개발/HTML

[JavaScript] 자바스크립트로 HTML 다른 페이지에 변수 전달 / 서버 스크립트 언어 안쓰고 변수 주고받기

by 알쓸전잡 2025. 8. 29.

서버 스크립트 언어를 사용하지 않고 .html 파일로 자바스크립트만 사용해서 서로 다른 페이지에서 변수를 주고받는 방법을 알려 드리겠습니다.

변수를 전달하는 HTML (원본 페이지)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>원본 페이지</title>
</head>
<body>
    <input id='v_name'>
    <button onclick='send_value()'>전송</button>
    
    <script>
        function send_value() {
            name_val = 'v_name';
            send_val = document.getElementById('v_name').value;

            name_val2 = 'v_name2';
            send_val2 = document.getElementById('v_name').value + ' hello';

            location.href='./tmp.html?' + name_val + '=' + send_val + '&' + name_val2 + '=' + send_val2;
            // location.href='tmp.html?' + send_val + '/' + send_val2; 변수명 따로 지정 안할꺼면 그냥 변수값을 구분자로 분리해서 GET 방식으로 페이지 호출
        }    
    </script>
</body>
</html>

ASP, PHP 등 서버 스크립트 언어를 사용하여 GET 방식으로 변수를 전송하는 방식으로 URL을 호출 했습니다.

호출_대상_파일.html?변수명1=변수값1&변수명2=변수값2

.html 파일에서 자바스크립트만 사용하는 경우 정형화된 방식이 아니므로 구분자는 원하는 방식대로 변경하면 됩니다.

html 에서 GET 방식으로 변수 전달1

변수를 받는 HTML (대상 페이지)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='result1'></div>
    <br>
    <div id='result2'></div>

    <script language = "javascript">
        // 구분자 "?" 기준으로 앞뒤로 분리  
        temp = location.href.split("?"); // temp[0] == tmp.html , temp[1] == v_name/입력값&v_name2/입력값 hello
        // 구분자 "&" 기준으로 변수 2개로 분리
        data = temp[1].split("&"); // data[0], data[1] 에 각각 변수명, 변수값 할당
        // tmp1, tmp2 에 변수명, 변수값 배열로 할당
        tmp1 = data[0].split("=");
        tmp2 = data[1].split("=");

        //console.log("변수명1: " +  tmp1[0]  + ", 변수값1: " + tmp1[1]); //콘솔에 변수1 값 띄워서 확인
        //console.log("변수명2: " +  tmp2[0]  + ", 변수값2: " + tmp2[1]); //콘솔에 변수2 값 띄워서 확인

        document.getElementById("result1").innerText = "변수명1: " +  tmp1[0]  + ", 변수값1: " + tmp1[1];
        document.getElementById("result2").innerText = "변수명2: " +  tmp2[0]  + ", 변수값2: " + tmp2[1];
    </script>
</body>
</html>

변수를 바로 받을 수 없으므로 실행한 URL에서 구분자로 변수 잘라서 별도로 저장하면 됩니다.

.html 파일로 변수 받기

변수명 없이 변수값만 전달하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>원본 페이지2</title>
</head>
<body>
    <input id='v_name'>
    <button onclick='send_value()'>전송</button>
    
    <script>
        function send_value() {
            val1 = document.getElementById('v_name').value;

            val2 = document.getElementById('v_name').value + ' bonus';

            // GET 방식으로 페이지 호출
            location.href='./tmp2.html?' + val1 + '/' + val2;
        }    
    </script>
</body>
</html>

굳이 변수명을 지정하지 않고 변수값만 전달할 수 있습니다.

변수가 여러 개가 아니고 유지보수가 자주 일어나지 않는 경우 이런 방식으로 간단하게 구현할 수 있습니다.

.html 변수값만 전달하기

변수값만 받기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='result1'></div>
    <br>
    <div id='result2'></div>

    <script language = "javascript">
        // 구분자 "?" 기준으로 앞뒤로 분리  
        temp = location.href.split("?");
        // 구분자 "/" 기준으로 변수 2개로 분리
        data = temp[1].split("/");

        document.getElementById("result1").innerText = "변수값1: " + data[0];
        document.getElementById("result2").innerText = "변수값2: " + data[1];
    </script>
</body>
</html>

변수명이 없으므로 split 로 데이터를 분리하는 과정을 한번 생략할 수 있습니다.

※ 전달하는 데이터가 복잡한 경우 추천하지 않습니다.

.html 파일로 변수값만 받기

* 스페이스바(공백) 변환 문제로 %20 으로 표시

저작자표시 비영리 동일조건 (새창열림)

'웹 개발 > HTML' 카테고리의 다른 글

[HTML] 텍스트, 요소 정렬하기 / 왼쪽, 가운데(중앙), 오른쪽, 위쪽, 아래쪽 (0)	2025.09.24
[HTML] <br> 태그 줄 간격 조절하기 (0)	2025.09.23
[HTML] RGB 색상 16진수 색상 코드 (RGB Color Code) (1)	2025.08.26
[HTML] 웹 브라우저 캐시 막기 설정 / 서버 설정 없이 meta 태그로 캐시 막기 (0)	2025.08.25
[HTML] 테이블 테두리 변경하기 한줄, 두줄 (테이블 속성 border, CSS) (1)	2025.08.23

티스토리툴바