[공식문서 읽기/API] LocalStorage / Geolocation

노마드코더 챌린지 2주차 과제에 나온 두 가지 API. '대충 이런게 있다~' 정도만 알고 있었는데 이번 기회에 제대로 알아두고 싶어 정리한다. 겸사겸사 공식 문서 읽는 습관도 들일 겸! 

 

1. LocalStorage API

• Window.localStorage 형태로 사용.
• Document의 Storage 객체에 접근할 수 있고, 이곳에 저장된 데이터는 브라우저 세션간에 공유됨.
• 페이지 세션이 끝날 때 만료되는 sessionStorage와 달리 영구적으로 데이터가 저장됨.
  (보통 데이터 유효기간이 만료되면 자동으로 삭제하도록 따로 설정)
• 저장된 데이터는 페이지 프로토콜별로 구분됨. 즉, 같은 주소라도 http와 https는 다른 localStorage에 저장됨.
• key와 value는 각 문자에 2byte를 할당하는 UTF-16 DOMstring 형태로 저장. 정수키는 자동으로 문자열로 변환됨.

// 항목 추가
localStorage.setItem("myCat","Tom")

// 저장한 항목 읽기
const cat = localStorage.getItem("myCat")
console.log(cat) // Tom

// 항목 제거
localStorage.removeItem("myCat")

// 전체 제거
localStorage.clear();

 

 

https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage

Window.localStorage - Web API | MDN

 

 

2. Geolocation API

• 웹 애플리케이션에서 위치 정보에 접근할 수 있는 API (사용자 동의 필수)
• navigator.gelocation 형태로 사용 -> Geolocation 객체 인스턴스 반환

Geolocation 인터페이스

• Geolocation.getCurrentPosition(): 현재 위치를 조사한 후 GeolocationPosition 객체로 반환
• Geolocation.watchPosition(): 장치 위치가 변경될때마다 호출하는 콜백 등록. 
• Geolocation.clearWatch(id): watchPosition()을 이용해 등록한 특정 콜백 삭제

 

비교적 간단했던 localStorage와 달리 Geolocation은 딸려오는 인스턴스들이 많다. 여기에 하나하나 저장하는것보단, 공식문서에서 네비게이터를 따라 예시 코드를 보는 것이 더 이해에 도움이 될 것 같아 블로그에 따로 정리하지는 않는다.

 

https://developer.mozilla.org/ko/docs/Web/API/Geolocation_API

Geolocation API - Web API | MDN