[Javascript] QueryString 가져오기.

홈페이지는 페이지 단위로 되어있다. 그렇기 때문에 페이지 이동 시, 데이터를 전달해야한다.
데이터를 전달하는 방식이 2가지 존재한다.

• QueryString (GET 방식)
• From (POST 방식)

 

QueryString 이란?

QueryString은 브라우저 주소창에서 쉽게 볼 수 있다.
다음에서 내 블로그를 검색해보았다.
https://search.daum.net/search?w=tot&DA=YZR&t__nil_searchbox=btn&sug=&sugo=&q=im-first-rate

? 이후부터 QueryString 이다. Key/Value 쌍으로 되어있고, 서로 구분하기 위해 구분자는 & 을 사용한다.

 

Javascript에서 QueryString 가져오기

궁극적으로 우리는 Javascript를 개발하면서, 해당 URL의 QueryString값이 필요할때가 많다.

 

그래서 QueryString을 가져오는 메서드를 만들어봤다.

 

function getQueryString(key) {
 
    // 전체 Url을 가져온다.
    var str = location.href;
 
    // QueryString의 값을 가져오기 위해서, ? 이후 첫번째 index값을 가져온다.
    var index = str.indexOf("?") + 1;
 
    // Url에 #이 포함되어 있을 수 있으므로 경우의 수를 나눴다.
    var lastIndex = str.indexOf("#") > -1 ? str.indexOf("#") + 1 : str.length;
 
    // index 값이 0이라는 것은 QueryString이 없다는 것을 의미하기에 종료
    if (index == 0) {
        return "";
    }
 
    // str의 값은 a=1&b=first&c=true
    str = str.substring(index, lastIndex); 
 
    // key/value로 이뤄진 쌍을 배열로 나눠서 넣는다.
    str = str.split("&");
 
    // 결과값
    var rst = "";
 
    for (var i = 0; i < str.length; i++) {
 
        // key/value로 나눈다.
        // arr[0] = key
        // arr[1] = value
        var arr = str[i].split("=");
 
        // arr의 length가 2가 아니면 종료
        if (arr.length != 2) {
            break;
        }
 
        // 매개변수 key과 일치하면 결과값에 셋팅
        if (arr[0] == key) {
            rst = arr[1];
            break;
        }
    }
    return rst;
}
 
console.log(getQueryString("a"))
console.log(getQueryString("b"))
console.log(getQueryString("c"))

테스트 예제 URL은 https://localhost:44310/?a=1&b=first&c=true

우리가 가져와서 분석해야되는 QueryString은 a=1&b=first&c=true

 

정확하게 우리가 원하는 key값에 대해서 value를 얻을 수 있었다.

 

typeof 메서드를 이용해서 값을 찍어보면 모두 string

 

1(number) 이든 first(string) 이든 true(boolean) 이든, 모두 typeof의 결과값은 string인 문자열이다.

형변환이 필요하면, type을 매개변수로 추가하는 방법도 있으니 더 변형하는 것도 하나의 방법이라 생각한다.