그들이 처음 소개되었을 때, 쿠키는 브라우저가 데이터를 저장하는 유일한 방법이었습니다. 그 이후로 Web Storage API, IndexedDB 및 Cache API와 같은 새로운 옵션이 추가되었습니다. 쿠키가 죽었나요? 브라우저에 데이터를 저장하기 위한 각 옵션을 살펴 보겠습니다.

Cookies 

쿠키는 사용자가 브라우저에 로컬로 저장 한 서버에서 보내거나 클라이언트에서 설정 한 정보입니다. 모든 요청에 ​​자동으로 첨부됩니다. HTTP는 상태 비 저장 프로토콜이므로 쿠키를 사용하면 추가 컨텍스트를 해당 서버에 전달하기 위해 클라이언트에 정보를 저장할 수 있습니다.

https://blog.logrocket.com/beyond-cookies-todays-options-for-client-side-data-storage 

쿠키에는 앱 데이터의 보안을 강화하는 데 매우 유용한 몇 가지 플래그가 있습니다. HttpOnly 플래그는 JavaScript를 사용하여 쿠키에 액세스하지 못하게 합니다. HTTP 요청에 첨부 된 경우에만 액세스 할 수 있습니다. 이는 XSS (Cross-Site Scripting) 공격을 통한 데이터 노출을 방지하는 데 유용합니다.

또한 보안 플래그는 요청이 HTTPS 프로토콜을 통해 전송 될 때만 쿠키가 전송되도록 합니다. lax 또는 strict (여기에서 차이점에 대해 읽음)로 설정할 수있는 SameSite 플래그를 사용하여 CSRF (교차 사이트 요청 위조) 요청을 방지 할 수 있습니다. 요청이 요청자와 동일한 도메인의 URL에 대한 경우에만 쿠키를 보내도록 브라우저에 지시합니다.

쿠키는 언제 사용 하시겠습니까? 

그렇다면 쿠키를 얻기 위해 어떤 경우에 도달해야 합니까? 가장 일반적인 사용 사례 중 하나는 인증 토큰입니다. HttpOnly 플래그는 XSS 공격에 대한 추가 보호 계층을 추가하므로 SameSite는 CSRF를 방지하고 Secure는 쿠키가 암호화되도록 할 수 있으며 인증 토큰에는 추가 보호 계층이 있습니다.

인증 토큰은 매우 작기 때문에 각 요청의 크기가 커지는 것에 대해 걱정할 필요가 없습니다. 또한 쿠키는 모든 요청에 ​​자동으로 첨부되므로 쿠키를 사용하면 서버에서 사용자 인증 여부를 결정할 수 있습니다. 서버에서 렌더링 한 콘텐츠 나 인증되지 않은 사용자를 로그인 페이지로 리디렉션 하려는 경우 유용합니다.

쿠키의 또 다른 유용한 사용법은 사용자의 언어 코드를 저장하는 것입니다. 대부분의 요청에서 사용자 언어에 액세스 하려고 하므로 자동으로 첨부된다는 사실을 이용할 수 있습니다.

쿠키는 어떻게 사용 하시겠습니까? 

쿠키를 사용하려는 이유에 대해 살펴 봤으므로 쿠키를 사용하는 방법을 살펴 보겠습니다. 서버에서 클라이언트에 쿠키를 설정하려면 HTTP 응답에 Set-Cookie 헤더를 추가하십시오. 쿠키는 key = value 형식이어야 합니다. 예를 들어 Node.js 애플리케이션에서 쿠키를 설정 한 경우 코드는 다음과 같습니다.

response.setHeader('Set-Cookie', ['user_lang=en-us', 'user_theme=dark_mode']);

이것은 두 개의 쿠키를 설정합니다 : user_lang을 en-us로 설정하고 user_theme을 dark_mode로 설정합니다.

클라이언트가 쿠키를 조작 할 수도 있습니다. 쿠키를 설정하기 위해 key = value 형식으로 document.cookie에 값을 할당 할 수 있습니다. 키가 이미 있으면 덮어 씁니다.

document.cookie = 'user_lang=es-es';

user_lang이 이미 정의 된 경우 이제 es-es와 같습니다.

document.cookie 값에 액세스하여 모든 쿠키를 읽을 수 있습니다. 세미콜론으로 구분 된 키 / 값 쌍의 문자열을 반환합니다.

document.cookie = 'user_lang=en-us';
document.cookie = 'user_theme=light_mode';
console.log(document.cookie); // 'user_lang=en-us; user_theme=light_mode;'

키 / 값 쌍의 접근성을 높이려면 다음 함수를 사용하여 이 문자열을 객체로 구문 분석 할 수 있습니다.

const parseCookies = x => x
  .split(';')
  .map(e => e.trim().split('='))
  .reduce((obj, [key, value]) => ({...obj, [key]: value}), {});

쿠키에 플래그 중 하나를 설정 해야 하는 경우 세미콜론 뒤에 추가 할 수 있습니다. 예를 들어, Secure 및 SameSite 플래그를 쿠키에 설정하려면 다음을 수행하십시오.

document.cookie = 'product_ids=123,321;secure;samesite=lax'

HTTPOnly는 서버에서만 쿠키에 액세스 할 수 있도록 설계되었으므로 서버에서만 쿠키를 추가 할 수 있습니다.

이러한 보안 플래그 외에도 Max-Age (쿠키가 지속되어야 하는 시간 (초)) 또는 Expires (쿠키가 만료되는 날짜)를 설정할 수 있습니다. 이 중 어느 것도 설정하지 않으면 쿠키는 브라우저 세션 동안 지속됩니다. 사용자가 시크릿을 사용하는 경우 사용자 세션이 종료되면 쿠키가 제거됩니다.

쿠키를 다루는 인터페이스가 가장 친숙하지 않기 때문에 사용하기 쉽게 js-cookie와 같은 유틸리티 라이브러리를 사용할 수 있습니다.

Web Storage API 

데이터를 로컬로 저장하는 최신 옵션은 Web Storage API입니다. HTML5에 추가 된 Web Storage API는 localStorage 및 sessionStorage를 포함합니다. 쿠키는 일반적으로 서버 / 클라이언트 통신을 처리하지만 Web Storage API는 클라이언트 전용 데이터에 가장 적합합니다.

로컬에 데이터를 저장하는 옵션으로 쿠키가 이미 있었기 때문에 왜 Web Storage가 필요합니까? 우리가 이미 다룬 한 가지 이유 : 쿠키는 각 HTTP 요청에 자동으로 추가되므로 요청 크기가 부풀어 질 수 있습니다. 이로 인해 Web Storage API를 사용하여 쿠키보다 더 많은 양의 데이터를 저장할 수 있습니다.

또 다른 장점은 보다 직관적 인 API입니다. 쿠키를 사용하면 개별 키에 액세스하기 위해 쿠키 문자열을 수동으로 구문 분석해야 합니다. 웹 저장소는 이것을 더 쉽게 만듭니다. 값을 설정하거나 얻으려면 setItem 또는 getItem을 실행할 수 있습니다.

localStorage.setItem('selected_tab', 'FAQ');
localSTorage.getItem('selected_tab'); // 'FAQ'

키와 값은 모두 문자열이어야 합니다. 객체 또는 배열을 저장하려면 저장하는 동안 JSON.stringify()를 호출하고 읽는 동안 JSON.parse()를 호출하여 이 작업을 수행 할 수 있습니다.

const product = {
  id: '123',
  name: 'Coffee Beans',
};

localStorage.setItem('cached_product', JSON.stringify(product));
JSON.parse(localStorage.getItem('cached_product'));

로컬 저장소의 또 다른 사용 사례는 여러 탭간에 데이터를 동기화하는 것입니다. 'storage'이벤트에 대한 리스너를 추가하여 다른 탭 / 창에서 데이터를 업데이트 할 수 있습니다.

window.addEventListener('storage', () => {
  console.log('local storage has been updated');
});

이 이벤트는 다른 문서에서 로컬 또는 세션 스토리지가 수정 된 경우에만 트리거 됩니다. 즉, 현재 브라우저 탭에서 스토리지 변경 사항을 청취 할 수 없습니다. 불행히도 이 기사를 쓰는 시점에서 Chrome에서 저장소 이벤트 리스너가 아직 작동하지 않습니다.

그렇다면 localStorage와 sessionStorage의 차이점은 무엇입니까? 쿠키와 달리 Web Storage API에는 만료 또는 최대 연령 기능이 없습니다. localStorage를 사용하는 경우 데이터를 수동으로 삭제하지 않으면 데이터가 무기한 지속됩니다. localStorage.removeItem( 'key')를 실행하여 단일 키 값을 제거하거나 localStorage.clear()를 실행하여 모든 데이터를 지울 수 있습니다.

sessionStorage를 사용하면 데이터가 현재 세션에 대해서만 지속됩니다. 최대 연령이나 만료를 설정하지 않으면 쿠키가 유지되는 방식과 유사하게 처리됩니다. 두 경우 모두 사용자가 시크릿인 경우 로컬 저장소는 세션간에 유지되지 않습니다.

IndexedDB 

쿠키 나 localStorage가 모두 적합하지 않은 것처럼 보이는 경우 브라우저 내 데이터베이스 시스템 인 IndexedDB가 있습니다.

localStorage는 모든 메소드를 동 기적으로 수행하지만 IndexedDB는 메소드를 모두 비동기 적으로 호출합니다. 이를 통해 나머지 코드를 차단하지 않고도 데이터에 액세스 할 수 있습니다. 액세스하는 데 비용이 많이 드는 대량의 코드를 처리 할 때 유용합니다.

IndexedDB는 또한 저장하는 데이터 유형이 더 유연합니다. 쿠키와 localStorage는 문자열 만 저장하도록 제한되어 있지만 IndexedDB는“구조화 된 복제 알고리즘”으로 복사 할 수 있는 모든 유형의 데이터를 저장할 수 있습니다. 여기에는 Object, Date, File, Blob, RegEx 등의 유형을 가진 객체가 포함됩니다.

이러한 성능 및 유연성 향상의 단점은 IndexedDB 용 API가 훨씬 저수준이고 복잡하다는 것입니다. 운 좋게도 이를 도울 수 있는 많은 유틸리티 라이브러리가 있습니다.

localForage는 IndexedDB에 더 간단한 localStorage 유사 API를 제공합니다. PouchDB는 온라인 CouchDB 데이터베이스와 동기화 할 수 있는 오프라인 지원 스토리지 API를 제공합니다. idb는 약속 기반 API가 훨씬 간단한 작은 라이브러리입니다. Dexie는 우수한 성능을 유지하면서 훨씬 강력한 쿼리 API를 추가합니다. 사용에 따라 사용할 수 있는 옵션이 많이 있습니다.

Cache API 

영구 데이터를 위한 또 다른 특수 도구는 캐시 API입니다. 원래 서비스 워커를 위해 만들어졌지만 모든 네트워크 요청을 캐시하는 데 사용할 수 있습니다. 캐시 API는 응답을 저장하고 검색하는 방법을 제공하는 Window.cache를 노출합니다. 이를 통해 나중에 액세스 할 수 있는 요청 및 응답 쌍을 저장할 수 있습니다.

예를 들어, API에서 요청하기 전에 브라우저 캐시에서 응답을 확인하려면 다음을 수행하십시오.

const apiRequest = new Request('https://www.example.com/items');
caches.open('exampleCache') // opens the cache
  .then(cache => {
    cache.match(apiRequest) // checks if the request is cached
      .then(cachedResponse => 
        cachedResponse || // return cachedReponse if available
        fetch(apiRequest) // otherwise, make new request
          .then(response => {
            cache.put(apiRequest, response); // cache the response
            return response;
          })
        })
    .then(res => console.log(res))
})

코드가 처음 실행될 때 응답을 캐시합니다. 이후에 요청이 캐시되고 네트워크 요청이 수행되지 않습니다.

결론적으로 

브라우저에 데이터를 저장하는 각 방법에는 고유 한 용도가 있습니다. 정보가 작고 민감하며 서버에서 사용될 가능성이 있는 경우 쿠키를 사용하는 것이 좋습니다. 더 크고 덜 민감한 데이터를 저장하는 경우 Web Storage API가 더 나은 선택 일 수 있습니다.

IndexedDB는 대량의 구조화 된 데이터를 저장할 계획이라면 좋습니다. 캐시 API는 HTTP 요청의 응답을 저장하는 데 사용됩니다. 필요한 것에 따라 작업을 위한 많은 도구가 있습니다.