1주차

웹 스토리지 (Web Storage)

earlchive 2025. 4. 11. 00:40

 

안녕하세요, 36기 YB 조성하입니다!

 

웹 서핑을 하면서 어떤 상품을 보고 나갔다가 재접속했을 때 '최근 본 상품'을 봤던 경험 다들 있으시겠죠?

이렇게 웹 브라우저에 자료를 저장하기 위한 기능인 웹 스토리지에 대해 정리해보았습니다!

Web Storage란?

웹 스토리지는 브라우저가 제공하는 클라이언트 측 저장소입니다.

웹 페이지에서 데이터를 로컬에 저장할 수 있게 해주고, 서버와 통신하지 않아도 브라우저 내에서 데이터를 기억할 수 있습니다.

 

이전에 설정해놓은 사용자 테마가 계속 유지된다거나, 입력폼을 새로고침해도 내용이 사라지지 않도록 해주는 것도 웹 스토리지인데요, 특히 서버에 요청하지 않고도 사용자 설정을 기억하고 상태를 유지해주는 로컬 스토리지는 UX를 아주아주 크게 개선해주는 큰 역할을 합니다.

 

웹 스토리지 등장 이전에는 클라이언트 정보들을 '쿠키'를 사용해 저장했습니다.

 

여기서 잠깐, 쿠키란?

 

웹 사이트가 사용자 브라우저에 저장하는 작은 데이터 조각을 말하는데요,

한 번 저장된 쿠키는 같은 도메인으로 요청을 보낼 때마다 자동으로 함께 전송됩니다.

이를 통해서 서버는 사용자를 식별할 수 있게 되는 것이죠!!

 

쿠키를 이용하면 로그인 상태를 유지할 수 있고, 언어나 테마와 같은 사이트 설정도 기억해냄과 동시에

사용자 행동 기록을 남겨 맞춤 광고를 띄울 수도 있습니다.

 

여기서 생기는 의문..

쿠키가 있는데... 웹 스토리지가 왜 필요해...?

 

쿠키는 

  1. 용량이 4KB로 매우매우 작고
  2. 모든 요청에 쿠키를 포함해 서버로 전송하기 때문에 속도가 느리고
  3. 보안에도 취약하다는

단점이 있습니다...

 

웹 스토리지는 이러한 쿠키의 단점들을 보완하면서 등장했습니다!
용량도 더 크고, 서버로 보내지도 않으면서, 더 간편하게 사용할 수 있어요.

 

  쿠키 웹 스토리지
저장 위치 브라우저 내부 브라우저 내부
용량 제한 4KB 이하 약 5MB
서버 전송 여부 HTTP 요청마다 전송 X
접근 방식 복잡 (document.cookie) 간편

 

 

웹 스토리지는 정보의 보존 기간과 공유 범위에 따라 크게 로컬 스토리지와 세션 스토리지로 분류됩니다.

 

1. 로컬 스토리지 (localStorage)

브라우저를 껐다 켜도 유지되는 저장소입니다.

사용자 테마 설정, 사용자 로그인 정보 등을 저장하는데 많이 사용됩니다!

2. 세션 스토리지 (sessionStorage)

현재 탭에서만 유지되는 임시 저장소입니다.

폼을 여러 페이지에 걸쳐서 작성할 때 입력값을 잠깐 저장하거나, 탭마다 서로 다른 상태를 유지하고 싶을 때 유용합니다!

 

  로컬 스토리지   세션 스토리지
유지 기간 무제한 (지우기 전까지) 현재 탭을 닫을 때까지
공유 범위 같은 origin의 모든 탭/창에서 접근 가능 현재 탭에서만 접근 가능

 

Web Storage 사용해보기

1. 데이터 저장하기: setItem 

localStorage.setItem("username", "sungha");
sessionStorage.setItem("theme", "dark");
  • "username"이라는 key에 "sungha"를 저장
  • localStorage는 브라우저를 종료해도 유지, sessionStorage는 탭 닫으면 사라짐

 

2. 데이터 가져오기: getItem

const name = localStorage.getItem("username"); 
const theme = sessionStorage.getItem("theme");
  • name은 "sungha", theme는 "dark"
  • 없으면 null 반환

 

3. 데이터 삭제하기: removeItem

localStorage.removeItem("username");
sessionStorage.removeItem("theme");
  • 해당 키의 값만 삭제


4. 데이터 전체 삭제: clear

localStorage.clear();
sessionStorage.clear();
  • 저장소 전체 초기화

 

5. 객체 저장하기 - JSON 사용

const user = { name: "sungha", age: 24 };
localStorage.setItem("user", JSON.stringify(user));
  • 객체를 저장할 때에는 JSON.stringify()를 이용하여 문자열로 변환
const savedUser = JSON.parse(localStorage.getItem("user"));
console.log(savedUser.name); // "sungha"
  • 다시 꺼낼 때에는 JSON.parse()를 이용하여 다시 파싱

 

웹 스토리지 사용시 주의할 점 ⚠️

  1. 민감한 정보는 저장하지 말 것!
    누구나 개발자 도구를 통해서 값을 확인할 수 있기 때문에, 토큰이나 개인정보는 절대 저장하면 안됩니다!

  2. 문자열만 저장 가능
    따라서 위에서 설명했던 것처럼 객체를 저장하려면 문자열로 변환하고, 꺼낼 때에는 파싱해야 합니다.

  3. 반복 호출 시 성능 문제
    localStorage는 비동기가 아닌 동기 방식이므로, 반복문에서 많이 호출하면 성능이 낮아질 가능성이 있습니다.

  4. 도메인 기반 격리
    다른 사이트끼리는 접근이 불가능합니다. 같은 origin 내에서만 공유할 수 있으니 참고하세요!

 

언제 유용한지 다시 한번 정리해보면? ✨

  • 다크모드/라이트모드와 같은 사용자 테마 설정 저장
  • 선택 항목 상태나 장바구니 항목 유지
  • 로그인 후 사용자 정보 표시 
  • 입력 폼을 새로고침하거나 페이지 간 이동이 있어도 입력값 유지

 

이렇게 웹 스토리지는 간편하지만 실용적인 .. 정말정말 착한 아이입니다.

 

실제로 토이 프로젝트나 사이드 프로젝트에서도 정말 자주 쓰인다고 하네요!!

우리 스웹팟 분들도 많이들 사용해보셨으려나요???

 

우리 함께 익혀두고 같이 사용해보아요⭐