브라우저 뒤로 가기 버튼 제어

뒤로 가기 비활성화 / 활성화

// 리스너 제거를 위해.named 함수로 선언해야 합니다
function handlePopState(event) {
    history.pushState(null, null, window.location.href);
}

// 브라우저 뒤로 가기 버튼 비활성화
history.pushState(null, null, window.location.href);
window.addEventListener('popstate', handlePopState);

// 뒤로 가기 기능 복원
window.removeEventListener('popstate', handlePopState);
window.location.href = "/word/show";

영구적으로 뒤로 가기 차단

// 사용자가 절대 돌아가지 못하도록 설정
history.pushState(null, null, window.location.href);
window.addEventListener('popstate', function(event) {
    history.pushState(null, null, window.location.href);
});

window.location 속성 모음

// 현재 전체 URL 가져오기 또는 페이지 이동
window.location.href;

// URL의 쿼리 문자열 반환 (물음표 이후 부분)
window.location.search;

// URL의 앵커 부분 반환 (해시(#) 이후 부분)
window.location.hash;

// URL의 프로토콜 반환 (http:, https: 등)
window.location.protocol;

// 호스트명 반환 (예: localhost/user?id=1 → '/user')
window.location.hostname;

// 포트 번호 반환
window.location.port;

히스토리 네비게이션 메서드

// 한 페이지 뒤로 이동
history.go(-1);

// 두 페이지 뒤로 이동
history.go(-2);

// 이전 페이지로 이동 (실제 클릭 효과)
history.back();

// 동일하게 이전 페이지로 이동
history.back(-1);

// 한 페이지 앞으로 이동
history.go(1);

// 다음 페이지로 이동 (실제 클릭 효과)
history.forward();

페이지 새로고침 방법 비교

// 가장 간단한 방법
history.go(0);

//推奨되는 방법
location.reload();

// location 객체만 참조
location = location;

// 새 페이지 로드 (히스토리에 기록됨)
location.href = location.href;

// assign 메서드 사용 (위와 동일)
location.assign(location.href);

// 현재 페이지 교체 (히스토리에 기록되지 않음)
location.replace('http://www.baidu.com');

// 현재 페이지 대체 (히스토리 삭제)
location.replace(this.href);
location.replace(location);

// 레거시 메서드
document.execCommand('Refresh');

window.navigate(location);

document.URL = location.href;

URL 파라미터 추출하기

function extractQueryParam(key) {
    const pattern = new RegExp(`(^|&)${key}=([^&]*)(&|$)`, 'i');
    const result = window.location.search.substr(1).match(pattern);
    return result ? decodeURI(result[2]) : null;
}

// 사용 예시: localhost:8080/index?userId=abc123
const userId = extractQueryParam('userId');
console.log(userId); // "abc123"