JS Web API ( storage, fetch, geolocation )

Storage API

Web Storage API는 브라우저에서 Key-Value 구조 데이터로 저장하고 검색하기 위한 방법을 제공합니다.

 

window.localStorage

• 특정 웹사이트의 로컬 저장소에 대한 접근을 제공
• 해당 도메인에 대한 데이터를 저장, 읽기, 수정, 삭제 할 수 있습니다.
• 데이터는 만료일이 없이 저장되어 브라우저를 닫아도 삭제되지 않습니다.

    localStorage.setItem("name", "Kim");  // 저장소에 데이터 저장

 

    localStorage.getItem("name");         // 저장소에서 데이터 항목 검색

 

window.sessionStorage

• localStorage 객체와 세션에 저장한다는 차이점만 빼면 똑같습니다.
• 세션에 저장하기 때문에 브라우저를 닫으면 데이터가 삭제됩니다.

    sessionStorage.setItem("name", "Kim");  // 저장소에 데이터 저장

 

    sessionStorage.getItem("name");         // 저장소에서 데이터 항목 검색

 

window.localStorage와 window.sessionStorage 둘 다 접두어를 빼고 사용이 가능합니다.

Storage 메서드는 다음과 같습니다.

 

• setItem(key, value) - 저장소에 데이터 저장
• getItem(key, value) - 저장소에 데이터 추출
• removeItem(key) - 저장소에 있는 키 제거
• key(n) - 저장소에 있는 n 번째 key 이름 추출
• length - 저장소 객체에 저장되어 있는 데이터 수
• clear() - 저장소 객체 비우기

 

---

Fetch API

Fetch API를 이용하여 웹 브라우저가 웹 서버에 HTTP 요청을 할 수 있습니다.

 

기본틀

fetch(url, options)

  .then((response) => console.log("response:", response))

  .catch((error) => console.log("error:", error));

 

GET 호출

fetch("http://localhost:8080/user/1")

  .then((response) => response.json())

  .then((data) => console.log(data));

대부분의 REST API는 JSON 형태로 데이터를 응답하기 때문에 json()을 사용하였습니다.

 

post 호출

      fetch("http://localhost:8080/user", {

        method: "POST",

        headers: {

          "Content-Type": "application/json",

        },

        body: JSON.stringify({

          title: "Post Test",

          body: "post test post test post test",

          userId: 1,

        }),

      })

        .then((response) => response.json())

        .then((data) => console.log(data));

 

---

Geolocation API

Geolocation API는 사용자의 위치를 파악하는데 사용되는 JS API 입니다.

이는 개인 정보를 침해할 수 있어서 사용자의 동의가 필요하고 HTTPS와 같은 보안 컨텍스트에서만 작동합니다.

 

 

• getCurrentPosition() - 사용자의 위치를 반환
  • coords.latitude: 위도 반환 (항상)
  • coords.longitude: 경도 반환 (항상)
  • coords.accuracy: 위도 값과 경도 값의 정확도
  • coords.altitude: 평균 해수면을 기준으로 하는 고도 값(해발)
  • coords.altitudeAccuracy: 고도 값의 정확도
  • coords.heading: 북쪽을 기준으로 현재 진행 방향에 대한 시계방향으로 각도 값
  • coords.speed: 초당 이동한 미터 수를 나타내는 속도 값 (초속)
  • timestamp: 위치 정보를 가져온 시간 반환

    <script>

      const text = document.getElementById("demo");

      function getLocation() {

        if (navigator.geolocation) {

          navigator.geolocation.getCurrentPosition(showPosition);

          // navigator.geolocation.getCurrentPosition(showPosition, showError);

        } else {

          text.innerHTML = "Geolocation API를 지원하지 않습니다.";

        }

      }

      function showPosition(position) {

        let lat = position.coords.latitude;

        let lon = position.coords.longitude;

        text.innerHTML = "위도: " + lat + "<br>경도: " + lon;

      }

 

     

      // getCurrentPosition의 두 번째 매개변수를 설정하였을 경우

      function showError(error) {

        switch (error.code) {

          case error.PERMISSION_DENIED:

            x.innerHTML = "User denied the request for Geolocation.";

            break;

          case error.POSITION_UNAVAILABLE:

            x.innerHTML = "Location information is unavailable.";

            break;

          case error.TIMEOUT:

            x.innerHTML = "The request to get user location timed out.";

            break;

          case error.UNKNOWN_ERROR:

            x.innerHTML = "An unknown error occurred.";

            break;

        }

      }

     

 

    </script>

   

 

• watchPosition() - 사용자의 현재 위치를 가져오고, 사용자의 움직임에 따라 지속적으로 위치 정보 갱신
• clearWatch() - watchPosition() 메소드의 실행을 중지