[Javascript] Url 파라미터 가져오는 방법, 새로고침 파라미터 수정 추가 방법

자바스크립트로 웹 페이지를 개발했을 때

데이터 통신 이후, 새로 고침을 이용하여 데이터를 다시 불러올 때가 있다

 

이번 포스팅에서는

새로고침을 했을 때 이전 페이지의 데이터를 가져올 필요가 있거나, 이전 데이터에 접근하는 방법을 포스팅할 예정이다

 

url파라미터를 이용하면 쉽게 구현할 수 있다

 

다음은 예제이다

 

---

 

먼저 URL 객체를 선언해서 url 데이터에 접근한다

 

url.searchParams.get(key) : url 파라미터 중 key 값을 통해 value에 접근한다

 

url.searchParams.set(key) : url 파라미터 중 key 값을 통해 value 값을 설정한다

 

<script>
    var url_href = window.location.href;
    var url = new URL(url_href); // URL 객체 선언
 
    $(document).ready(function() {
        console.log(url.searchParams.get("id")); // url 파라미터 중 id라는 key를 가진 파라미터 value를 가지고 옴 
    });
 
 
    //페이지를 새로고침할 때, 동일한 key의 값을 변경
    function page_reload(){
        url.searchParams.set("tabId","2");
        window.location.search = url.searchParams;
    }
 
    //페이지를 새로고침할 때, 동일한 key의 값을 추가
    function page_reload_add_parameter(){
        window.location.search += '&name=gildong';
    }
</script>