[JS] 웹 스토리지 localStorage 사용법

localStorage는 브라우저에 내장된 저장소로 데이터를 브라우저에 key, value 값으로 Storage에 저장할 수 있다. 저장한 데이터는 세션간에 공유되며 심지어 브라우저를 닫고 다시 열어도 저장한 데이터가 유지된다. 데이터는 클라이언트(사용자의 디바이스)에 저장되므로 서버로 전송되지 않는다.

 

용량은 약 5~10MB까지 데이터 저장이 가능하고(브라우저에 따라 다름), 로컬에 저장되므로 민감한 데이터 저장은 추천하지 않는다. Local Storage는 간단한 데이터 저장이 필요할 때 유용하지만, 민감한 정보 관리나 대량의 데이터를 다룰 때는 서버나 데이터베이스를 사용하는 것이 적합하다.

 

 

localStorage 간단 정리

• localStorage는 브라우저에 데이터를 저장한다.
• 페이지를 새로고침하거나 브라우저를 닫았다가 다시 열 때도 데이터를 유지된다.
• setItem(), getItem(), removeItem(), clear() 메서드를 사용하여 데이터를 저장, 조회, 삭제할 수 있다.
• 객체나 배열을 저장할 때는 JSON.stringify()로 문자열로 변환한다.
• 객체나 배열을 불러올 때는 JSON.parse()로 다시 객체로 변환해야 한다.

 

---

 

 

localStorage 언제 사용할까

사용자 설정 저장이 필요할 때
다크 모드 여부, 언어 설정, 글꼴 크기 등 사용자 선호 설정을 저장한다.

localStorage.setItem('theme', 'dark');

 

 

사용자 데이터를 저장해야할 때

간단한 사용자 정보(이름, 이메일 등)를 저장해 페이지 이동 시에도 상태를 유지할 수 있다.

localStorage.setItem('username', 'JohnDoe');

 

 

 

애플리케이션 상태를 저장해야할 때
장바구니 정보, 게임 진행 상태 등 클라이언트 측 애플리케이션 상태를 저장할 수 있다.

 

 

임시 데이터를 저장할 때
서버와의 통신 없이 간단히 데이터를 저장하고 복구할 때 사용할 수 있다.

 

 

---

 

localStorage 사용법

setItem, 데이터 저장

localStorage.setItem('name', '장원영'); // name이라는 키에 '장원영' 저장

 

getItem, 데이터 읽기

const name = localStorage.getItem('name'); // '장원영' 반환
console.log(name); // 출력: 장원영

removeItem, 데이터 삭제

localStorage.removeItem('name'); // name 키 삭제

clear, 모든 데이터 삭제

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

 

 

사용예시

다크모드 사용시

// 테마 저장
const setTheme = (theme) => {
  localStorage.setItem('theme', theme);
  document.body.className = theme;  // 페이지 테마 변경
};

// 저장된 테마 불러오기
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
  document.body.className = savedTheme;  // 이전에 저장된 테마 적용
}

// 버튼 클릭으로 테마 변경
document.getElementById('dark-mode-btn').addEventListener('click', () => {
  setTheme('dark');
});
document.getElementById('light-mode-btn').addEventListener('click', () => {
  setTheme('light');
});

 

 

로그인 처리 예시

// 로그인 처리
const login = (username) => {
  localStorage.setItem('isLoggedIn', true);
  localStorage.setItem('username', username);
};

// 로그아웃 처리
const logout = () => {
  localStorage.removeItem('isLoggedIn');
  localStorage.removeItem('username');
};

// 로그인 상태 체크
const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
const username = localStorage.getItem('username');

if (isLoggedIn) {
  console.log(`${username} is logged in`);
} else {
  console.log("User is not logged in");
}

 

 

객체 저장하기

// 객체 저장
const user = {
  name: "John",
  age: 30,
};
localStorage.setItem('user', JSON.stringify(user));

// 객체 불러오기
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // 'John'
console.log(storedUser.age);  // 30

// 객체 삭제
localStorage.removeItem('user');

 

 

배열 저장하기

// 배열 저장
const tasks = ["Buy groceries", "Clean the house", "Pay bills"];
localStorage.setItem('tasks', JSON.stringify(tasks));

// 배열 불러오기
const storedTasks = JSON.parse(localStorage.getItem('tasks'));
console.log(storedTasks); // ["Buy groceries", "Clean the house", "Pay bills"]

// 배열에 항목 추가 후 다시 저장
storedTasks.push("Do laundry");
localStorage.setItem('tasks', JSON.stringify(storedTasks));