3. html로 파라미터를 넘겨 javascript로 파라미터 받기

주소창으로 들어오는 url 경로가 boardDetail.html?POST_ID=POST000001 이라고 할 때, 

자바스크립트를 통해 파라미터의 value값을 변수로 저장할 수 있다. 

 

이 함수를 사용하여 파라미터의 이름으로 검색하여 변수에 저장한 다음 자유롭게 사용 가능하다. 

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
  }
  
var POST_ID = getParameterByName('POST_ID');
console.log("getParameterByName ==>"+POST_ID);

 

나는 게시글의 상세페이지 조회를 하기 위해 POST_ID라는 변수로 저장하여 사용하였다. 

$.ajax({
    type:"POST",
    url:"http://localhost:8080/boardDetail.do",
    data : JSON.stringify({"POST_ID" : POST_ID}),
    contentType : "application/json",
    dataType : "json",
    success:function(result){
      
        console.log("==>", result.data);
        SUBJECT.setValue(result.data.SUBJECT); 
        VIEWS.setValue(result.data.VIEWS);
        REG_USER.setValue(result.data.REG_USER);
        CONTENT.setValue(result.data.CONTENT);
        REG_DATE.setValue(result.data.REG_DATE);
       
    },
    error : function(XMLHttpRequest, textStatus, errorThrown){
   
    }
    }); // ajax
});

 

처음에는 localStorage를 사용해 웹 브라우저에 저장해 값이 필요할때마다 불러서 사용하였는데, 글 등록이나 삭제 로직을 수행한 뿌려줄 페이지를 이동할 때 한계가 보였다 .... ㅠ 또한 localStorage가 보안적으로 취약하다고 한다. 

다음 포스팅에 번외로 localStorage에 대해서 정리해보겠다.