Javascript URL 및 QueryString 사용하기

Query string이란 무엇일까?

 

" 웹 페이지의 URL에 추가적인 데이터를 전달하는 방법 중 하나,

URL의 끝에 "?" 기호를 사용하고, 그 뒤에 "이름=값" 쌍을 추가하여 사용"

 

웹에서 간단하게 data를 보관하거나 전달하는 경우 자주 사용되나 사용자에게 직접적으로 노출되는 부분이기 때문에 보안적으로 이슈가 있는 데이터는 사용하지 않는것이 좋다.

 

그 전에 window.location 객체를 잠깐 살펴보자.

 

[ window.location properties ]

hash : 주소값에 붙어있는 anchor값 반환
host : URL의 도메인과 포트 반환
hostname : URL의 도메인 반환
href : URL 반환
origin : 프로토콜 + URL의 도메인 + 포트
pathname : URL 경로 반환
port :  서버포트 반환
protocol : 프로토콜 반환
search : URL에 붙은 매개변수 반환(물음표 뒤의 값)

 

[ window.location methods ]

assign(url) : 새로운 주소 이동

reload(true) : 현재 페이지 새로고침

replace(url) : 새로운 주소 이동 (세션 히스토리 제거됨, 뒤로가기 사용 불가)

 

Query String 조작하기

// 예를들어 url = www.ex.com/post?from=sample1 인 경우...

// URLSearchParams 생성
const queryParams = new URLSearchParams(window.location.search);

// "from" queryString 값 가져오기
const from = queryParams.get('from');	// sample1

// "from" queryString 값 수정하기
queryParams.set('from', '수정할값');

// "from" queryString 값 제거
queryParams.delete('from');

 

URL 수정하기 (뒤로가기 생성됨 주의)

history.pushState(null, '', newUrl);