STUDY/프론트엔드

History.replaceState()

level_? 2021. 2. 4. 18:28

History.replaceState()

- 현재 history를 수정해 메소드의 매개변수에 전달된 stateObj, title, url로 대체한다. 일부 유저의 동작에 대한 응답으로 history 객체의 상태나 현재 history의 URL을 업데이트하려는 경우 유용하다.

 

history.replaceState(stateObj, title[, url])

 

- Parameters

 

  • stateObj : state 객체는 replaceState에 전달된 history 항목과 연관된 JavaScript 객체입니다. state object는 null일 수 있다.

 

const data = { name = 'history', value = 'replaceState' }

 

  • title : 나중에는 사용할 수도 있지만, 대부분의 브라우저는 현재 이 파라미터를 무시하고 있다. 이 부분에 빈 String을 전달하면 나중에 메소드가 변화하더라도 안전하다. 또는, state에 짧은 title을 전달할 수도 있다.

 

  • url : Optionalhistory 항목의 URL 이다. 새 URL은 현재 URL과 출처가 동일해야(same origin)한다. 그렇지 않으면 replaceState에서 예외가 발생하게 된다.

 

history.replaceState(data, '', '/history/replaceState');

 

let name = '';
let value = '';
if (location.hash) {
    let data = history.state;
    if (data){
        name = data.name;
        value = data.value;
    }
}

console.log('name : ' + name);
console.log('value : ' + value);

결과
name : history
value : replaceState

 

 

출처 : developer.mozilla.org/ko/docs/Web/API/History/replaceState