Local storage 와 Session storage 이란 무엇인가 | ChatGPT

Local storage와 session storage

Local storage와 session storage는 웹 애플리케이션에서 클라이언트 측에 데이터를 저장하는 두 가지 주요 방법입니다.

---

공통 특징

둘 다 HTML5 웹 스토리지 API(Web Storage API)의 일부로 제공되며,

브라우저 내에 키-값 쌍의 데이터를 저장할 수 있는 기능을 제공합니다.

두 방법 모두 쿠키에 비해 더 많은 데이터를 저장할 수 있으며, 서버로 데이터를 자동으로 전송하지 않기 때문에 보안 및 성능 측면에서 유리합니다.

그러나 각기 다른 사용 사례가 있습니다.

---

Local Storage

🔵 Persistent Storage

Local storage에 저장된 데이터는 명시적으로 삭제하지 않는 한 브라우저를 닫거나 컴퓨터를 재부팅해도 유지됩니다.

🔵 Capacity

보통 브라우저마다 다르지만, 대개 5MB에서 10MB 정도의 데이터를 저장할 수 있습니다.

🔵 Use Cases

사용자의 설정, 테마, 북마크, 로그인 정보와 같은 장기적으로 유지해야 할 데이터 저장에 적합합니다.

Session Storage

🔵 Temporary Storage

Session storage에 저장된 데이터는 탭이나 창을 닫으면 자동으로 삭제됩니다.

🔵 Capacity

Local storage와 유사한 크기(약 5MB)의 데이터를 저장할 수 있습니다.

🔵 Use Cases

단기적인 데이터 저장에 적합하며, 사용자 세션 동안만 필요한 데이터 저장에 유용합니다.

예를 들어, 특정 탭에서 진행 중인 폼 데이터나 쇼핑 카트 정보 저장에 적합합니다.

사용 이유

🔵 데이터 지속성

Local Storage: 장기간에 걸쳐 데이터를 유지해야 할 때 사용.

Session Storage: 단기적인 세션 동안 데이터가 필요할 때 사용.

🔵 저장 용량

Local Storage: 많은 양의 데이터를 장기적으로 저장할 수 있습니다.

Session Storage: 비슷한 양의 데이터를 저장할 수 있지만, 세션이 끝나면 사라집니다.

🔵 성능

둘 다 클라이언트 측에 데이터를 저장하므로, 서버로부터 데이터를 반복해서 가져오는 대신 로컬에서 빠르게 접근할 수 있습니다.

🔵 보안

Local storage와 Session storage 모두 서버로 자동으로 전송되지 않기 때문에 쿠키보다 상대적으로 안전합니다.

민감한 데이터를 저장할 때는 여전히 주의가 필요합니다. 브라우저의 개발자 도구를 통해 쉽게 접근할 수 있기 때문입니다.

🔵 간편성

쿠키와 비교했을 때, 웹 스토리지 API를 사용하여 데이터를 저장하고 관리하는 것이 더 간편합니다.

Local Storage 예제 코드

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

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

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

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

Session Storage 예제 코드

// 데이터 저장
sessionStorage.setItem('sessionID', '123456');

// 데이터 가져오기
let sessionID = sessionStorage.getItem('sessionID');
console.log(sessionID); // '123456'

// 데이터 삭제
sessionStorage.removeItem('sessionID');

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

요약

이 두 가지 저장 방식은 웹 애플리케이션 개발에서 필수적인 도구이며, 각각의 특징을 이해하고 적절하게 사용하는 것이 중요합니다.

출처 | ChatGPT