[팀프로젝트] 영화 상세페이지 - 페이지별 리뷰 댓글창 구현 (2)

liinyeye·2024년 5월 3일

Project

목록 보기

6/44

지난 번에 만들었던 댓글창 구현에 이어, 각 페이지별 파라미터값을 아이디값으로 쓸 수 있도록 파라미터 가져오는 방법을 알아봤다.

Javascript URL 파라미터 가져오기

http://127.0.0.1:5500/DetailPage/detail.html?id=843527

다음과 같은 URL에서 파라미터 부분의 값을 가져오고 싶을 때가 있다.

URL 가져오기

let url = document.location.href;
console.log(url);       // http://127.0.0.1:5500/DetailPage/detail.html?id=843527

URL Query부분 가져오기

let query = window.location.search;
console.log(query);       // ?id=843527

URL Query의 파라미터 부분 가져오기

let query = window.location.search;
let param = new URLSearchParams(query);
let id = param.get('id');

console.log(id);        // 843527

URLSearchParams 객체

URL의 쿼리 문자열에 대한 작업을 할수 있는 메서드 제공

get(parameter) : 해당 파라미터의 value 출력, 없을시 null 출력
has(parameter) : 해당 파라미터가 존재하면 true
append(parameter, value) : 파라미터 추가, 이미 파라미터가 존재해도 계속 추가된다
set(parameter, value) : 파라미터 수정
delete(parameter) : 파라미터 제거
toString() : 쿼리부분 출력, ?는 제거되어 출력 된다

let query = window.location.search;         // http://127.0.0.1:5500/DetailPage/detail.html?id=843527
let param = new URLSearchParams(query);     // ?id=843527

param.get("id");         // 843527
param.getAll("id");      // [843527]
param.has("id");         // true

param.append("writer", "유로파니");
param.toString();       // 843527&writer=유로파니

param.set("writer", "europani");
param.toString();       // 843527&writer=europani

param.delete("writer");
param.toString();       // 843527