[ JS ] Local Storage, Session Storage, Cookies에 대하여

Local Storage, Session Storage, Cookies에 대한 내용입니다.

Local Storage와 Session Storage는 웹 브라우저가 제공하는 두 가지 웹 스토리지 옵션으로, 웹 응용 프로그램이 사용자의 장치에 로컬로 데이터를 저장할 수 있도록 합니다. 둘 다 Web Storage API의 일부이며 비슷한 기능을 가지고 있지만 차이점이 있습니다.

 

Local Storage

• 지속성: 로컬 저장소에 저장된 데이터는 브라우저를 닫거나 컴퓨터를 재시작한 후에도 사용자의 장치에 남아 있습니다.
  사용자 또는 웹 응용 프로그램에 의해 명시적으로 지워지지 않는 한 세션 및 브라우저 재시작에 걸쳐 지속됩니다.
• 저장 제한: 로컬 스토리지의 일반적인 저장 제한은 약 5-10MB이지만 브라우저에 따라 제한이 다를 수 있습니다. 따라서 더 긴 기간에 걸쳐 사용 가능한 많은 양의 데이터를 저장하기에 적합합니다.
• 범위: 로컬 스토리지에 저장된 데이터는  동일한 도메인 내의 서로 다른 브라우저 창이나 탭을 통해 액세스할 수 있습니다. 단일 세션에만 국한되지 않습니다.
• 사용 사례: 사용자가 나중에 웹 사이트로 돌아올 때도 데이터를 사용할 수 있기 때문에 리소스 캐싱, 사용자 기본 설정 저장 또는 응용 프로그램 상태 저장에 로컬 스토리지를 사용하는 경우가 많습니다.

Session Storage

• 지속성: 세션 저장소에 저장된 데이터는 한 페이지의 세션 동안에만 사용할 수 있습니다.
  사용자가 브라우저 탭이나 창을 닫으면 바로 삭제됩니다. 세션이나 브라우저 재시작 사이에는 지속되지 않습니다.
• 스토리지 제한: 세션 스토리지는 일반적으로 로컬 스토리지와 동일한 스토리지 제한이 약 5-10MB이므로 단일 세션에 대해 합리적인 양의 데이터를 저장할 수 있습니다.
• 범위: 세션 저장소에 저장된 데이터는 동일한 브라우저 탭이나 창 내에서만 액세스할 수 있으며, 다른 탭이나 창을 통해서나 다른 브라우저 세션 간에는 공유되지 않습니다.
• 사용 사례: 세션 저장소는 사용자가 특정 웹 페이지와 상호 작용하는 동안 짧은시간 동안만 필요한 임시 데이터를 저장하는 데 유용하며, 폼 데이터를 일시적으로 저장하거나 세션 중에 사용자 인증 토큰을 관리하는 등의 작업에 주로 사용됩니다.

 

사용 사례

// Local Storage
localStorage.setItem("username", "Shiro21");

const username = localStorage.getItem("username");

console.log(username); // Shiro21

// Session Stroage
sessionStorage.setItem("usernick", "Jun");

const usernick = sessionStorage.getItem("usernick");

console.log(usernick); // Jun

 

로컬 저장소와 세션 저장소 모두 데이터를 키와 값 쌍으로 저장하고 문자열 값만 허용한다는 점에 유의하는 것이 중요합니다.

객체나 배열과 같은 복잡한 데이터 구조를 저장해야 하는 경우 저장하기 전에 JSON으로 직렬화하고 검색할 때 역직렬화해야 합니다.

 

요약을 하자면, 로컬 저장소와 세션 저장소는 웹 응용 프로그램이 사용자 장치에 데이터를 저장할 수 있도록 하는 브라우저 저장소 옵션입니다.

로컬 저장소는 여러 세션에 걸쳐 지속되며, 세션 저장소는 일시적이며 단일 브라우저 세션에만 적용됩니다. 둘 중 하나를 선택하는 것은 특정 사용 사례와 데이터 저장 요구 사항에 따라 달라집니다.

 

---

 

Cookies

쿠키는 웹 사이트가 사용자의 디바이스에 저장하여 사용자 또는 사용자의 브라우징 활동에 대한 정보를 기억하는 작은 데이터입니다. 쿠키는 사용자 세션 추적, 사용자 선호도 저장, 쇼핑 카트 및 사용자 인증과 같은 기능 구현 등을 포함한 다양한 목적으로 웹 개발에 널리 사용됩니다.

 

쿠키와 관련된 핵심 내용

1. 목적

• 세션 관리: 쿠키는 일반적으로 사용자 세션을 관리하는 데 사용됩니다. 사용자가 웹 사이트에 로그인하면 방문 중에 사용자를 식별하기 위한 세션 쿠키가 생성되는 경우가 많습니다. 이를 통해 서버는 특정 사용자와 요청을 연결할 수 있습니다.
• 사용자 기본 설정: 쿠키는 사용자 기본 설정 및 언어 기본 설정, 테마 선택 또는 글꼴 크기와 같은 설정을 저장하여 개인화된 브라우징 경험을 제공할 수 있습니다.
• 추적 및 분석 ( Tracking and Analytics ): 쿠키는 사용자의 행동을 추적하고 분석 데이터를 수집하는 데 사용됩니다. 이를 통해 웹 사이트는 사용자가 콘텐츠와 상호 작용하고 개선하는 방법을 이해할 수 있습니다.
• 전자상거래: 쿠키는 전자상거래 웹사이트에 필수적인 것으로 장바구니에 물건을 담아두거나 사용자 로그인 정보를 기억하고 사용자 활동을 추적하여 추천을 받을 수 있습니다.

2. 쿠키 속성

• 이름 - 값 쌍: 쿠키는 이름 - 값 쌍으로 구성되며, 여기서 이름은 쿠키를 식별하는 문자열이고 값은 쿠키와 관련된 데이터입니다.
• 만료 날짜: 쿠키는 사용자의 장치에 저장되는 기간을 결정하는 만료 날짜를 가질 수 있습니다. 세션 쿠키는 일시적이며 브라우저 세션이 끝나면 만료되지만 영구 쿠키는 지정된 기간 동안 지속될 수 있습니다.
• 도메인 및 경로: 쿠키를 웹 사이트의 특정 도메인 및 경로에 적용하도록 설정할 수 있습니다. 이를 통해 웹 사이트 개발자는 HTTP 요청과 함께 쿠키가 전송되는 위치를 제어할 수 있습니다.
• 보안 및 HttpOnly 플래그: 쿠키에는 보안(HTTP) 연결을 통해서만 전송되어야함을 나타내는 "보안" 및 "HttpOnly"와 같은 플래그가 있을 수 있으므로 보안이 강화됩니다.

3. 개인 정보 보호 및 보안

• 쿠키는 서로 다른 웹 사이트에 걸쳐 사용자의 행동을 추적하는 데 사용될 수 있기 때문에 프라이버시에 대한 우려를 불러일으킬 수 있습니다. 이를 해결하기 위해 브라우저는 사용자가 쿠키를 관리하고 차단할 수 있는 옵션을 제공합니다.
• 쿠키에는 자사 쿠키 ( 방문 중인 웹 사이트에서 설정 ), 타사 쿠키 ( 사용자가 현재 방문 중인 도메인이 아닌 다른 도메인에서 설정 ) 등 다양한 유형이 있습니다. 제 3자 쿠키는 개인 정보 보호에 관한 논쟁의 대상이 되어 왔으며 브라우저 제한이 강화되었습니다.

4. 자바스크립트에서 쿠키 접근하기

• 자바스크립트에서는 쿠키를 읽고 수정할 수 있는 document.cookie 속성을 통해 쿠키에 접근할 수 있습니다.

// 쿠키 읽기
const cookieValue = document.cookie.split('; ').find(row => row.startsWith('myCookie=')).split('=')[1];

// 쿠키 설정
document.cookie = 'myCookie=myValue; expires=Wed, 30 Dec 2023 12:00:00 UTC; path=/';

 

쿠키를 읽고 설정하는 예제

// 쿠키 읽기
const readCookie = (name) => {
  const cookies = document.cookie.split('; ');
  const cookie = cookies.find(row => row.startsWith(`${name}=`));
  if (cookie) {
    return cookie.split('=')[1];
  }
  return null;
};

const myCookieValue = readCookie('myCookie');
if (myCookieValue) {
  console.log(`Value of myCookie: ${myCookieValue}`);
} else {
  console.log('myCookie does not exist or has expired.');
}

// 쿠키 설정
const setCookie = (name, value, expires, path = '/') => {
  const cookie = `${name}=${value}; expires=${expires}; path=${path}`;
  document.cookie = cookie;
};

const expirationDate = new Date('Wed, 30 Dec 2023 12:00:00 UTC').toUTCString();
setCookie('myCookie', 'myValue', expirationDate);

console.log('myCookie has been set.');

 

5. 저장 제한

• 쿠키에는 크기 제한이 있기 때문에 ( 보통 쿠키당 약 4KB ) 대용량 데이터를 저장하기에 적합하지 않습니다.

6. 대안

• 웹 개발자는 쿠키 외에 위에서 소개드린 Web Storage API의 일부인 Local Storage및 Session Storage와 같은 다른 스토리지 옵션에 액세스 할 수 있으며, 클라이언트 측에서 더 많은 양의 데이터를 저장하는 데 사용됩니다.

 

요약을 하자면, 쿠키는 웹 사이트가 사용자의 장치에 정보를 저장하기 위해 사용하는 작은 데이터 파일로 웹 사이트가 사용자 선호도를 기억하고 세션을 관리하며 사용자 행동을 추적할 수 있게 해줍니다. 웹 개발에 많은 귀중한 사용 사례가 있지만 개인 정보 보호 문제로 인해 브라우저 제한이 증가하고 특정 작업에 대해 대체 저장 옵션을 사용하는 쪽으로 전환되었습니다.