웹 애플리케이션을 개발하거나 사용할 때 클라이언트 측에서 데이터를 저장하고 사용할 수 있는 여러 가지 옵션이 있습니다. 이런 옵션들을 이용해서 사용자 경험을 향상시키고, 데이터를 영구적으로 저장하거나 임시로 보관할 수 있습니다. 여기에서는 자바스크립트의 클라이언트 사이드 스토리지 기술들을 살펴보겠습니다.

1. 로컬 스토리지

로컬 스토리지는 브라우저에 데이터를 영구적으로 저장하는 메커니즘입니다. 이 데이터는 사용자가 직접 삭제하지 않는 이상 계속 보관됩니다. 로컬 스토리지는 키-값 형태의 데이터를 저장하며, localStorage 객체를 통해 접근할 수 있습니다.

예를 들어, 다음과 같이 데이터를 로컬 스토리지에 저장할 수 있습니다.

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

2. 세션 스토리지

세션 스토리지는 브라우저 탭이 열려 있는 동안에만 데이터를 저장하는 메커니즘입니다. 사용자가 탭을 닫거나 브라우저를 종료할 때 데이터는 삭제됩니다. 세션 스토리지도 로컬 스토리지와 마찬가지로 키-값 형태의 데이터를 저장하며, sessionStorage 객체를 이용하여 접근할 수 있습니다.

다음은 세션 스토리지에 데이터를 저장하는 예시입니다.

sessionStorage.setItem('token', 'exampleToken');

3. 쿠키

쿠키는 클라이언트 측에서 사용할 수 있는 가장 오래된 형태의 스토리지 메커니즘입니다. 쿠키는 브라우저가 서버에 HTTP 요청을 보낼 때 데이터를 함께 전송하는 방식으로 동작하며, 이름-값 형태의 데이터를 저장합니다. 쿠키는 만료 기간을 가질 수 있고, 이를 설정하여 데이터를 일정 기간 동안 유지할 수 있습니다.

다음은 쿠키를 자바스크립트로 설정하는 예시입니다.

document.cookie = "username=exampleUser; expires=Sat, 31 Dec 2022 23:59:59 GMT; path=/";

요약

로컬 스토리지, 세션 스토리지, 그리고 쿠키는 모두 자바스크립트를 이용하여 클라이언트 측에서 데이터를 저장하는 다양한 방법을 제공합니다. 이러한 스토리지 메커니즘을 적절히 활용하여 웹 애플리케이션의 성능을 향상시키고 사용자 경험을 개선할 수 있습니다.

참고문헌:

• MDN 웹 문서: 클라이언트 측 저장소