[Javascript] location과 history

winter100·2024년 1월 8일

자바스크립트

목록 보기
9/15

1. 자바스크립트 location과 history 객체

  • 더 많은 내용은 MDN에 많으니 참고

1.1 location 객체 간단하게 알아보기

  • location은 url과 관련된 객체이다.
const naver = 'https://www.naver.com'

1. href
location.href = naver; // 주소로 페이지가 전환됨

2. assign()
location.assign(naver); // href와 마찬가지

3. replace()
location.replace(naver); // 이동 후 다시 돌아갈 수 없음.

4. host  // 도메인을 알려줌
location.host
ex) 'www.naver.com'

5. origin // 프로토콜을 포함한 전체 도메인을 알려줌
location.origin 
ex) 'https://www.naver.com'

6. pathname // 도메인 뒤의 주소를 알려줌
ex) 'https://section.cafe.naver.com/ca-fe/home' 에서 사용시
location.pahtnmae // '/ca-fe/home'

1.2 history 객체 간단하게 알아보기

  • location은 브라우저 기록을 편집할 수 있는 객체이다.
1. back() // 이전 페이지로 되돌아감
history.back();
 
2. forward() // 다음 페이지
history.forward(); 

3. length // 사용자가 현재 브라우저의 탭에서 몇 개의 단계를 거쳤는지 알려줌
history.length; 

4. go() // 해당 숫자 만큼 단계를 이동시킴
history.go(-2) // 해당 탭에서 2단계 이전의 주소로 돌아감
history.go(1) // 앞으로 갈 주소가 있다면 해당 숫자만큼 앞으로 감

1.3 navigator 객체 간단하게 알아보기

  • 브라우저와 유저의 운영체제와 상호작용이 가능하도록 함
1. geolocation // 위치를 파악 할 수 있음
navigator.geolocation.getCurrentPosition((data)=>{console.log(data)})
'이후 위치 정보를 확인하겠다는 알람이 뜨고 확인을 누르면 console.log()에 위도와 경도 등 주소를 알려줌.'

2. clipboard // 클립보드 관련

0개의 댓글