[멋쟁이 사자처럼 프론트엔드 스쿨] 42일차 TIL - localStorage, sessionStorage

🍰 수업 때도 겨우겨우 따라가는 정도이다 보니, 나중에 복습할 때는... 백지에서부터 다시 시작하는 기분... 오늘은 실습 잔뜩과 localStorage 진도를 나갔다. 음... 다음 주 프로젝트 인 게 말이 되나?

🍴 웹 스토리지 객체

: 클라이언트 측에서 데이터를 저장하고 관리하기 위해 사용되는 HTML5 API

• 쿠키와 유사한 역할, but 더 많은 데이터 저장 가능
• 쿠키와 달라 HTTP 요청 헤더에 포함되지 않아 보안성이 높음

localStorage

• 사용자가 브라우저를 닫을 때까지 데이터 유지

sessionStorage

• 사용자가 브라우저 세션을 종료할 때까지 데이터 유지
• 사용자가 브라우저를 닫고 다시 열면 세션 스토리지에 저장된 데이터는 삭제됨

웹 스토리지 객체 사용 방법

 

• setItem() 메서드: 데이터를 저장
• getItem() 메서드: 저장된 데이터를 조회
• removeItem() 메서드: 저장된 데이터를 삭제
• clear() 메서드: 저장된 모든 데이터를 삭제

// 사용자 이름 저장
localStorage.setItem('username', '홍길동');

// 저장된 사용자 이름 조회
const username = localStorage.getItem('username');
console.log(username); // 홍길동 출력

// 저장된 사용자 이름 삭제
localStorage.removeItem('username');