URL정보 (window.location / URLSerachParams)

togongs·2021년 10월 7일
0

2021

목록 보기
24/30

자바스크립트의 window.location에는 URL정보를 볼 수 있는 변수들이 있는데

아래의 내용은 http://kftc.local:8088/test.jsp?gg=1 주소를 실행시켰을때 반환될 수 있는 정보들의 예 이다

window.location.hostname; 
// => kftc.local

window.location.href; 
// => http://kftc.local:8088/test.jsp 

window.location.host; 
// => kftc.local:8088 

window.location.port; 
// => 8088 

window.location.pathname; 
// => test.jsp 

window.location.search; 
// => ?gg=1 

window.location.protocol; 
// => http:

URL에서 쿼리 파라미터를 가져오거나 수정할떄 사용되는 URLSearchParams

http://127.0.0.1/search/?sch_keyword=홍길동&type=1

sch = location.search
console.log(sch) 
// ?sch_keyword=홍길동&type=1
URLSearchParams 객체로 변환
var params = new URLSearchParams(sch);
sch_keyword 값을 조회
var sch_keyword = params.get('sch_keyword');
console.log(sch_keyword);
// 홍길동

sch_keyword 값을 변경
params.set('sch_keyword', '임꺽정');

다시 string 을 변환
url = params.toString();
console.log(url);
// ?sch_keyword=임꺽정&type=1

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const _id = urlParams.get('_id');

이것의 사용은 어떻게 되나?
_id값을 받아서 쿼리스트링으로 사용하겠다는 것이다.

만약 서버에서 params로 주소값을 줬다면 사용할 수 없다

profile
개발기록

0개의 댓글