[JavaScript] 브라우저 API (fetch, localStorage, sessionStorage)

웹 개발을 하다 보면 데이터를 불러오거나 저장해야 하는 상황이 자주 발생합니다. 이를 위해 JavaScript는 다양한 브라우저 API를 제공합니다. 그중에서도 fetch API, localStorage, sessionStorage는 데이터를 효과적으로 다룰 수 있도록 도와줍니다. 이번 글에서는 이 API들의 개념과 사용법을 상세히 알아보겠습니다.

 

1. fetch API

fetch API란?

fetch()는 네트워크 요청을 보내고 응답을 처리할 때 사용하는 최신 JavaScript API입니다. 과거에는 XMLHttpRequest 객체를 사용했지만, 코드가 복잡하고 가독성이 떨어지는 문제가 있었습니다. fetch()는 이를 해결하여 간결하고 직관적인 방식으로 HTTP 요청을 보낼 수 있도록 합니다.

기본 사용법

fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then((response) => response.json()) // 응답을 JSON 형식으로 변환
  .then((data) => console.log(data))   // 변환된 데이터를 출력
  .catch((error) => console.error("Error:", error)); // 오류 처리

async/await 사용

fetch()는 프로미스를 반환하기 때문에 async/await을 사용하여 더 직관적으로 코드를 작성할 수 있습니다.

async function fetchData() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Error:", error);
  }
}

fetchData();

HTTP 요청 방법

// GET 요청 (데이터 조회)
fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => response.json())
  .then((data) => console.log(data));

// POST 요청 (데이터 생성)
fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ title: "New Post", body: "Hello world!", userId: 1 }),
})
  .then((response) => response.json())
  .then((data) => console.log(data));

// PUT 요청 (데이터 수정)
fetch("https://jsonplaceholder.typicode.com/posts/1", {
  method: "PUT",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ title: "Updated Title", body: "Updated content", userId: 1 }),
})
  .then((response) => response.json())
  .then((data) => console.log(data));

// DELETE 요청 (데이터 삭제)
fetch("https://jsonplaceholder.typicode.com/posts/1", { method: "DELETE" })
  .then((response) => console.log("Deleted:", response.status));

2. localStorage

localStorage란?

localStorage는 브라우저에 데이터를 영구적으로 저장할 수 있는 API입니다. 사용자가 브라우저를 닫거나 페이지를 새로고침해도 데이터가 유지됩니다.

기본 사용법

// 데이터 저장
localStorage.setItem("username", "JohnDoe");

// 데이터 가져오기
const username = localStorage.getItem("username");
console.log(username); // JohnDoe

// 데이터 삭제
localStorage.removeItem("username");

// 모든 데이터 삭제
localStorage.clear();

객체 저장

localStorage는 문자열만 저장할 수 있으므로, 객체를 저장하려면 JSON 문자열로 변환해야 합니다.

const user = { name: "Alice", age: 25 };

// 객체 저장 (JSON 문자열로 변환)
localStorage.setItem("user", JSON.stringify(user));

// 객체 가져오기 (JSON 파싱)
const storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser.name); // Alice

localStorage 활용 예제

// 방문 횟수 저장 예제
let visits = localStorage.getItem("visits") || 0;
visits++;
localStorage.setItem("visits", visits);
console.log(`방문 횟수: ${visits}`);

3. sessionStorage

sessionStorage란?

sessionStorage는 브라우저 세션(탭)이 유지되는 동안만 데이터를 저장하는 API입니다. 새로고침해도 유지되지만, 브라우저 탭을 닫으면 데이터가 삭제됩니다.

기본 사용법

// 데이터 저장
sessionStorage.setItem("sessionUser", "Alice");

// 데이터 가져오기
const sessionUser = sessionStorage.getItem("sessionUser");
console.log(sessionUser); // Alice

// 데이터 삭제
sessionStorage.removeItem("sessionUser");

// 모든 데이터 삭제
sessionStorage.clear();

sessionStorage와 localStorage의 차이점

구분	localStorage	sessionStorage
데이터 유지 기간	브라우저를 닫아도 유지됨	브라우저 탭을 닫으면 사라짐
용량 제한	5MB 내외 (브라우저마다 다름)	5MB 내외 (브라우저마다 다름)
데이터 공유	같은 도메인 내 모든 탭에서 공유 가능	탭마다 개별 저장됨 (공유 불가능)

4. localStorage와 sessionStorage 활용 예제

1) 로그인 유지 기능 (localStorage 활용)

function login(username) {
  localStorage.setItem("loggedInUser", username);
  console.log(`${username} 님이 로그인했습니다.`);
}

function checkLogin() {
  const user = localStorage.getItem("loggedInUser");
  if (user) {
    console.log(`${user} 님이 로그인 상태입니다.`);
  } else {
    console.log("로그인되지 않았습니다.");
  }
}

function logout() {
  localStorage.removeItem("loggedInUser");
  console.log("로그아웃되었습니다.");
}

// 사용 예시
login("Alice");
checkLogin(); // Alice 님이 로그인 상태입니다.
logout();
checkLogin(); // 로그인되지 않았습니다.

2) 페이지 새로고침해도 유지되는 다크 모드 (localStorage 활용)

const toggleDarkMode = () => {
  const body = document.body;
  body.classList.toggle("dark-mode");

  // 현재 다크 모드 상태 저장
  const isDarkMode = body.classList.contains("dark-mode");
  localStorage.setItem("darkMode", isDarkMode);
};

// 페이지 로드 시 저장된 다크 모드 설정 적용
document.addEventListener("DOMContentLoaded", () => {
  const isDarkMode = localStorage.getItem("darkMode") === "true";
  if (isDarkMode) {
    document.body.classList.add("dark-mode");
  }
});

3) 세션 데이터 유지 (sessionStorage 활용)

function saveSessionData() {
  sessionStorage.setItem("tempData", "이 데이터는 현재 세션에서만 유지됩니다.");
}

function getSessionData() {
  console.log(sessionStorage.getItem("tempData"));
}

saveSessionData();
getSessionData(); // "이 데이터는 현재 세션에서만 유지됩니다."

결론

• fetch API를 사용하면 비동기 네트워크 요청을 간편하게 보낼 수 있습니다.
• localStorage는 데이터를 영구적으로 저장하며, 페이지를 닫아도 유지됩니다.
• sessionStorage는 세션이 유지되는 동안만 데이터를 저장하며, 탭을 닫으면 삭제됩니다.
• localStorage는 사용자 설정(예: 다크 모드) 또는 로그인 정보 유지에 적합합니다.
• sessionStorage는 일시적인 데이터를 저장할 때 유용합니다.