[TIL] 자바스크립트로 URL 파라미터 사용과 URLSearchParams

window.location

웹 브라우저의 현재 URL에 대한 정보를 제공하는 JavaScript의 내장 객체이다

해당 객체는 현재 URL을 나타내는 여러 속성과 메소드를 가지고 있다

 

href

현재 url 주소를 가져오기

전체 url을 문자열로 반환한다 

이때 프로토콜, 호스트 경로, 포트, 쿼리 스트링 등 모든 부분이 포함된다

console.log(window.location.href);

해당 주소로 이동

window.location.href = "http://example.com";

 

protocol / host / hostname / port

아래 코드를 가지고 설명하면

http://example.com/page.html?q=123

• protocol http:, https:
• host : 호스트(도메인) + 포트 example.com:80
  • hostname : 호스트(도메인) example.com
  • port : 포트 번호 80
• search : 쿼리 스트링 ?q=123

 

query

쿼리 스트링이 여러 개 일 때, 각각의 키-값 쌍은 "&" 기호로 구분 된다

이것을 파싱하여 필요한 파라미터를 구할 수 있는데, 이때 URLSearchParams 객체를 사용한다

http://example.com/page.html?q=123&category=tech&sort=popular // 3개의 쿼리 스트링

 

URLSearchParams

• append(name, value)
• delete(name)
• get(name)
• has(name)
• set(name, value)
• entries() : [name, value] 형태의 반복 가능한 객체로 반환
• keys() : 이름들을 반복 가능한 객체로 반환
• values() : 값을 반복 가능한 객체로 반환

const searchParams = new URLSearchParams("q=123&category=tech&sort=popular"); // URLSearchParams 객체 생성

//param 가져오기
console.log(searchParams.get('q')); // "123"
console.log(searchParams.get('category')); // "tech"
console.log(searchParams.get('sort')); // "popular"

// 새로운 파라미터 추가
searchParams.append('page', '1');
console.log(searchParams.toString()); // "q=123&category=tech&sort=popular&page=1"

// 파라미터 제거
searchParams.delete('sort');
console.log(searchParams.toString()); // "q=123&category=tech&page=1"