쿠키, 로컬 저장소 및 세션 저장소

프런트엔드 인터뷰 질문 시리즈 6번째 포스팅입니다. 준비 수준을 높이고 전반적인 최신 정보를 얻으려면 프런트엔드 캠프에 등록하는 것을 고려해 보세요.

---

쿠키, 로컬 저장소 및 세션 저장소는 모두 클라이언트 측에 데이터를 저장하는 데 사용됩니다. 이러한 메커니즘은 테마나 개인 설정과 같은 인증 토큰이나 클라이언트 전용 상태를 저장하는 데 특히 유용합니다. 세 가지 저장소 유형 모두 다음과 같은 특징을 공유합니다.

1. 데이터를 키-값 쌍으로 저장합니다.
2. 모든 값은 문자열 형식으로 저장됩니다. 값이 문자열이 아닌 경우 직렬화되어 저장됩니다.
3. 이러한 메커니즘에 저장된 데이터는 클라이언트가 액세스할 수 있습니다(HttpOnly 쿠키 제외).

쿠키

쿠키는 많은 양의 데이터를 저장할 수 없습니다. 저장 용량은 도메인당 약 4KB로 제한됩니다. 이러한 제한은 브라우저가 요청할 때마다 쿠키가 서버에 자동으로 전송되기 때문에 발생합니다. 과도한 클라이언트 측 데이터를 쿠키에 저장하면 페이로드 크기가 증가하여 성능에 부정적인 영향을 미칠 수 있습니다.

쿠키에는 어떤 데이터를 저장해야 하나요?
쿠키는 인증 토큰, 세션 ID, 분석 ID 및 유사한 정보와 같이 서버로 전송해야 하는 데이터를 저장하는 데 이상적입니다. 또한 쿠키를 사용하면 동일한 도메인이나 하위 도메인의 여러 탭이나 창에서 데이터를 공유할 수 있습니다.

다양한 플래그를 사용하여 쿠키를 구성하여 동작을 조정하거나 보안을 강화할 수 있습니다.

• HttpOnly는 클라이언트 측에서 JavaScript를 통해 쿠키에 액세스할 수 없도록 하여 XSS 공격의 위험을 완화합니다.
• maxAge/expires는 쿠키의 만료 날짜를 지정합니다. 만료일이 설정되어 있지 않으면 브라우저를 닫을 때 쿠키가 삭제됩니다.

쿠키 플래그에 대해 더 자세히 알고 싶으십니까? 제 LinkedIn 게시물을 확인해 보세요.

로컬 저장소 및 세션 저장소와 달리 쿠키는 Set-Cookie 헤더를 사용하여 서버에서 설정(읽기: "추가")할 수도 있습니다.

// Set a cookie for the key `token` that `expires` on 1st March 2025.
document.cookie =
  'token=a1-b2-c3; expires=Sat, 1 Mar 2025 23:59:59 GMT; path=/';

// Read all cookies. There's no way to read specific cookies using `document.cookie`.
// You have to parse the string yourself.
console.log(document.cookie); // token=a1-b2-c3

// Delete the cookie with the key `token` by setting an
// expiry date in the past. The value doesn't matter.
document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';

로컬 저장소

쿠키와 달리 localStorage는 도메인당 약 5MB의 훨씬 더 큰 저장 용량을 제공합니다. 이는 localStorage가 장기 데이터를 저장하도록 설계되었기 때문입니다. 브라우저가 닫혀도 데이터를 유지하므로 지속적인 클라이언트 측 스토리지 요구 사항에 이상적입니다.

그럼 localStorage에는 어떤 데이터를 저장해야 할까요?
localStorage는 클라이언트 측에서만 사용되며 요청이 있을 때마다 서버로 전송할 필요가 없는 데이터를 저장하는 데 가장 적합합니다. 몇 가지 예는 사용자가 로그인하기 전에 장바구니에 추가된 웹사이트 또는 제품의 테마입니다.

localStorage에 저장된 데이터는 사용자가 수동으로 삭제하거나 웹사이트에서 JavaScript를 사용하여 삭제할 때까지 무기한 유지됩니다.

쿠키와 마찬가지로 localStorage의 데이터는 동일한 출처의 모든 탭이나 창에서 액세스할 수 있으므로 도메인 내에서 클라이언트측 상태를 공유하는 데 유용합니다.

// Set a cookie for the key `token` that `expires` on 1st March 2025.
document.cookie =
  'token=a1-b2-c3; expires=Sat, 1 Mar 2025 23:59:59 GMT; path=/';

// Read all cookies. There's no way to read specific cookies using `document.cookie`.
// You have to parse the string yourself.
console.log(document.cookie); // token=a1-b2-c3

// Delete the cookie with the key `token` by setting an
// expiry date in the past. The value doesn't matter.
document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';

세션 저장

sessionStorage는 단기 클라이언트측 데이터를 저장하는 데 사용됩니다. localStorage와 마찬가지로 도메인당 약 5MB의 저장 용량을 제공하며 동일한 API를 공유합니다.

sessionStorage와 localStorage는 유사한 기능을 공유하지만 데이터 지속성과 접근성
이라는 두 가지 주요 측면에서 다릅니다. localStorage와 달리 sessionStorage는 탭이나 브라우저가 닫히면 데이터를 유지하지 않습니다. 또한 sessionStorage에 저장된 데이터는 해당 데이터가 생성된 특정 탭이나 창으로 격리됩니다. 즉, 동일한 출처의 다른 탭이나 창에서는 해당 데이터에 액세스할 수 없습니다.

그럼 sessionStorage의 사용 사례는 무엇인가요?
sessionStorage는 단일 세션에만 필요한 데이터를 저장하는 데 이상적입니다. 예를 들어, 실수로 페이지를 새로 고치는 긴 양식을 작성하는 사용자를 생각해 보세요. 양식 데이터가 sessionStorage에 저장된 경우 새로 고침 후에도 유지되므로 사용자가 진행 상황을 잃지 않고 계속할 수 있습니다.

그러나 이 데이터는 다른 탭에서 또는 탭이 닫힌 후에는 액세스할 수 없다는 점에 유의하는 것이 중요합니다.

// Set a value in localStorage.
localStorage.setItem('theme', 'dark');

// Get a value from localStorage.
console.log(localStorage.getItem('theme')); // 'dark'

// Remove a value from localStorage.
localStorage.removeItem('theme');

// Clear all data in localStorage.
localStorage.clear();

쿠키는 브라우저가 보내는 모든 요청에 ​​자동으로 포함되지만, localStorage나 sessionStorage에 저장된 데이터는 맞춤 코드를 작성하여 수동으로 서버로 전송할 수 있습니다.

---

요약

1. 쿠키, localStorage 및 sessionStorage는 클라이언트 측에 데이터를 저장하는 데 사용됩니다.
2. 쿠키는 Set-Cookie 응답 헤더를 사용하여 서버에서 설정할 수 있는 유일한 저장 형식입니다.
3. 쿠키는 요청이 있을 때마다 서버에 자동으로 전송됩니다.
4. localStorage와 sessionStorage는 쿠키(4KB)에 비해 상당히 큰 저장 공간(5MB)을 가지고 있습니다. 두 스토리지 모두 동일한 API 인터페이스를 공유합니다.
5. 쿠키에는 만료일이 있으며, 그렇지 않은 경우 브라우저를 닫으면 삭제됩니다.
6. localStorage 데이터는 사용자나 웹사이트 자체가 수동으로 삭제하지 않는 한 무기한 유지됩니다.
7. sessionStorage 데이터는 세션이 종료된 후, 즉 탭이나 창이 닫히면 지워집니다.

---

방금 읽은 내용이 마음에 드시나요? 프론트엔드 캠프를 확인해 보세요 ✌️

위 내용은 쿠키, 로컬 저장소 및 세션 저장소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!