JavaScript 에센셜 | 위니북스

브라우저 스토리지

1. 브라우저 스토리지란?

브라우저 스토리지는 웹 애플리케이션에서 클라이언트 측 데이터를 저장할 수 있는 기능입니다. 이를 통해 웹 페이지를 새로고침하거나 브라우저를 종료한 후에도 데이터를 유지할 수 있습니다.

// 간단한 예시 localStorage.setItem('name', 'licat'); console.log(localStorage.getItem('name')); // 'licat'

2. 로컬 스토리지

로컬 스토리지는 브라우저에 데이터를 영구적으로 저장하는 방법입니다. 사용자가 명시적으로 데이터를 삭제하지 않는 한, 데이터는 브라우저를 종료해도 유지됩니다.

// 로컬 스토리지 확인 console.log(window.localStorage); // Storage { ... }

로컬 스토리지에 저장된 데이터는 도메인별로 구분되며, 다른 도메인에서는 접근할 수 없습니다. 또한, 로컬 스토리지는 문자열만 저장할 수 있으므로 객체를 저장하려면 JSON.stringify() 를 사용해야 합니다.

// 객체를 로컬 스토리지에 저장 const user = { name: 'licat', age: 30 }; localStorage.setItem('user', JSON.stringify(user)); localStorage.setItem('darkmode','light'); // 로컬 스토리지에서 객체를 가져오기 const storedUser = JSON.parse(localStorage.getItem('user')); console.log(storedUser); // { name: 'licat', age: 30 } console.log(localStorage.getItem('darkmode'));

로컬 스토리지는 브라우저마다 차이가 있지만, 일반적으로 5MB 정도의 용량 제한이 있습니다.

3. 세션 스토리지

세션 스토리지는 브라우저 세션 동안만 데이터를 저장하는 방법입니다. 브라우저를 닫으면 데이터가 삭제됩니다. 세션 스토리지는 로컬 스토리지와 유사하지만, 데이터의 지속성이 다릅니다.

// 세션 스토리지 확인 console.log(window.sessionStorage); // Storage { ... }

세션 스토리지도 도메인별로 구분되며, 문자열만 저장할 수 있습니다. 객체를 저장하려면 JSON.stringify()를 사용해야 합니다.

// 객체를 세션 스토리지에 저장 sessionStorage.setItem('user', JSON.stringify(user)); // 세션 스토리지에서 객체를 가져오기 const storedUser = JSON.parse(sessionStorage.getItem('user')); console.log(storedUser); // { name: 'licat', age: 30 }

세션 스토리지 또한 5MB 정도의 용량 제한이 있습니다. 세션 스토리지는 주로 로그인 상태 유지, 장바구니 정보 저장 등과 같은 일시적인 데이터 저장에 사용됩니다. 세션 스토리지는 탭 간에 공유되지 않으며, 각 탭에서 별도의 세션 스토리지를 사용합니다. 따라서, 한 탭에서 저장한 데이터는 다른 탭에서 접근할 수 없습니다.

4. 쿠키

쿠키는 웹 서버가 클라이언트에 저장하는 작은 데이터 조각입니다. 쿠키는 만료일을 설정할 수 있으며, 만료일이 지나면 자동으로 삭제됩니다. 쿠키는 도메인별로 구분되며, 다른 도메인에서는 접근할 수 없습니다.

document.cookie 속성에 쿠키 정보를 설정할 수 있습니다. 쿠키는 문자열 형식으로 저장되며, 여러 개의 쿠키를 세미콜론(;)으로 구분합니다.

HTTP 요청을 보낼 때 쿠키가 자동으로 포함되므로, 서버와 클라이언트 간의 상태를 유지하는 데 유용합니다. 쿠키는 보안상의 이유로 HTTPS 연결에서만 전송되는 경우가 많습니다.

또 보안상의 이유로 서버 측에서 HttpOnly 속성을 설정하여 JavaScript에서 쿠키에 접근할 수 없도록 할 수 있습니다. 이 경우, 클라이언트 측 스크립트는 쿠키를 읽거나 수정할 수 없습니다.

// 쿠키 설정 document.cookie = "username=licat; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/"; console.log(document.cookie);

하지만 쿠키는 크기 제한이 있으며(일반적으로 4KB), 많은 양의 데이터를 저장하는 데 적합하지 않습니다. 또한, 사용자가 쿠키를 수동으로 삭제할 수 있으므로, 데이터의 지속성이 보장되지 않습니다.