local storage란?

웹 브라우저에서 제공하는 메커니즘.

데이터를 영속적으로 저장하기 위해 사용한다.

개요

로컬 스토리지는 HTML5에서 도입된 웹 스토리지 메커니즘 중 하나로, 클라이언트 측에서 데이터를 키-값 쌍으로 저장하는 방식입니다. 저장된 데이터는 해당 도메인의 모든 페이지에서 접근할 수 있으며, 사용자가 직접 삭제하지 않는 한 영구적으로 보존됩니다. 이는 웹 애플리케이션의 사용자 경험을 향상시키고 오프라인 작업을 지원하는 데 도움을 준다.

사용법

local storage는 js의 localStorage 객체를 통해 접근할 수 있다.

localStorage.setItem(key, value) key값에 데이터를 저장

localStorage.getItiem(key) key값의 데이터를 조

localStorage.removeItem(key) key값은 데이터를 삭제한

// 데이터 저장
localStorage.setItem('username', 'John');
localStorage.setItem('theme', 'dark');

// 데이터 조회
const username = localStorage.getItem('username');
const theme = localStorage.getItem('theme');

console.log(username); // 출력: John
console.log(theme); // 출력: dark

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

!!!주의 사항!!!

• 문자열 형태로만 데이터를 저장할 수 있다. 그래서 객체, 배열 등 복잡한 데이터를 저장하려면 JSON.stringify()와 JSON.parse()를 사용하여 자렬화 및 역직렬화 해야 한다.
• 용량 제한 : 사용ㅈ가 많을 때 데이터를 저장하는 경우는 용량 제한을 고려하며 효율적으로 활용해야 한다.
• 보안: 클라이언트에 데이터를 저장하는 것이라 민감한 정보를 저장하기에는 적합하지 않다(서버에서 암호화된 데이터를 가지고 오는 것이 안전)