local storage/session storage

도입배경

 

2000년대 초반에는 웹 개발에서 주로 쿠키를 사용하여 클라이언트 측 데이터를 저장하곤 했습니다. 그러나 쿠키는 몇 가지 제약 사항과 문제점이 있었습니다. 예를 들어, 쿠키는 작은 용량의 데이터만 저장할 수 있고, 모든 HTTP 요청에 자동으로 포함되어 네트워크 부하를 초래할 수 있습니다.

이러한 문제를 해결하기 위해 HTML5 명세의 일부로 Local Storage와 Session Storage가 도입되었습니다. 이 기술은 2009년에 W3C에 의해 표준화되었고, 대부분의 현대 웹 브라우저에서 지원됩니다

 

.

Local Storage와 Session Storage의 주요 특징:

클라이언트 측 저장: 이들은 클라이언트 측에서만 접근 가능하며, 서버로 전송되지 않습니다. 이로 인해 네트워크 부하가 줄어듭니다.

용량: 일반적으로 5~10MB의 데이터를 저장할 수 있어, 쿠키보다 훨씬 더 많은 정보를 저장할 수 있습니다.

API: JavaScript를 통해 간단하게 데이터를 저장하고 검색할 수 있는 API가 제공됩니다.

Session Storage는 탭이나 창이 닫힐 때까지 데이터를 유지하며, Local Storage는 영구적으로 데이터를 저장합니다.

Local Storage는 도메인, 프로토콜, 그리고 포트까지 모두 일치해야만 데이터에 접근할 수 있기 때문에, 포트가 다른 두 서비스에서는 Local Storage를 공유할 수 없습니다. 

 

 

코드 샘플

// Local Storage에 정보 저장
localStorage.setItem('isLoggedIn', 'true');

//Local Storage에서 정보 불러오기
const storedIsLoggedIn = localStorage.getItem('isLoggedIn');

 

브라우저에서 확인

크롬에서 F12를 누르고 애플리케이션탭 > 왼쪽탭에서 로컬 스토리지를 보면 다음처럼 내용 확인이 가능하다.