Cookie, LocalStorage, SessionStorage

00  Cookie 쿠키

쿠키는 웹사이트 접속시 접속자의 개인장치에 다운로드 되고 브라우저에 저장되는 작은 텍스트 파일이다. 웹사이트는 쿠키를 통해 접속자의 장치를 인식하고, 접속자의 설정과 과거 이용내역에 대한 일부 데이터를 저장한다.

즉, 쿠키는 서버를 대신해 웹 브라우저에 정보를 저장하고 요청할 때 그 정보를 서버에 보내 사용자를 식별할 수 있게 한다.

쿠키는 주로 아래 세 가지 목적을 위해 사용된다.

세션 관리(Session management) : 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리
개인화(Personalization) : 사용자 선호, 테마 등의 세팅
트래킹(Tracking) : 사용자 행동을 기록하고 분석하는 용도

쿠키의 구성

document.cookie="user=John; path=/; expires=Sat, 02 Oct 2021 17:46:04 GMT";
//key=value 뒤는 옵션

기본적으로 데이터 형태는 name=value 쌍의 문자열(string)의 형태로 저장되며, 4KB 이상은 저장이 불가능하다. 각 속성의 값은 세미콜론(;)을 기준으로 구분해서 작성한다.

 

쿠키 경로 path

path=/mypath

URL path(경로)의 접두사로, 이 경로나 이 경로의 하위 경로에 있는 페이지만 쿠키에 접근할 수 있다. 절대 경로여야 하며, 기본값은 현재 경로이다. 일반적으로는 path=/ 로 설정해 웹사이트의 모든 페이지에서 쿠키에 접근할 수 있도록 한다.

 

도메인 domain

domain=site.com

쿠키에 접근 가능한 도메인을 지정한다. 옵션에 아무 값도 넣지 않았다면 쿠키를 설정한 도메인에서만 쿠키에 접근할 수 있다. 도메인 하나당 저장할 수 있는 쿠키의 개수는 20여 개 정도로 한정되어 있고, 개수는 브라우저에 따라 조금씩 다르다.

 

만료일  expires, max-age

expires=Tue, 19 Jan 2038 03:14:07 GMT
max-age=3600 //만료시간 3600sec=1hour

expires(유효 일자) 또는 max-age(만료 기간) 옵션을 설정하면 브라우저를 닫아도 쿠키가 삭제되지 않고, 지정한 유효 일자까지 쿠키가 유지되고 해당 일자에 도달하면 쿠키를 자동으로 삭제한다. 옵션이 지정되어 있지 않으면 브라우저가 닫힐 때 쿠키는 삭제된다(=세션 쿠키 session cookie).

 

HttpOnly

Set-Cookie: 쿠키명=쿠키값; path=/; HttpOnly

쿠키는 클라이언트에서 자바스크립트로 조회할 수 있기 때문에, 자바스크립트로 쿠키를 가로채고자 하는 시도(대표적으로 CSS(Cross Site Scripting)이 있음)를 막기 위해 HTTP Only Cookie를 사용한다. HTTP Only Cookie를 설정하면 브라우저에서 해당 쿠키로 접근할 수 없게 되지만, 쿠키에 포함된 정보의 대부분이 브라우저에서 접근할 필요가 없기 때문에 HTTP Only Cookie는 기본적으로 적용하는 것이 좋다.

 

Secure

Set-Cookie: 쿠키명=쿠키값; path=/; secure

이 옵션을 설정하면 HTTPS로 통신하는 경우에만 쿠키가 전송된다. 이 옵션이 없으면 기본 설정이 적용되어 http, https 구분하지 않고 생성된 쿠키를 읽을 수 있다.

 

SameSite

크로스 사이트 요청 위조(cross-site request forgery, XSRF) 공격을 막기 위해 만들어진 옵션이다.

쿠키 쓰기

1. 클라이언트 코드에서 쿠키를 작성

document.cookie="name=heeeun;path=/;max-age=3600"

2. 서버에서 쿠키를 작성

response.header{
  Set-Cookie:"name=heeeun;path=/;max-age=3600;httpOnly"
}

쿠키 접근/ 삭제

//쿠키 접근
document.cookie

//쿠키 삭제
 document.cookie="같은 정보 ... max-age=0"

쿠키 보내기

 fetch(URL,{
   credentials:`include`
 });

** 쿠키 함수

getCookie(name) : 정규 표현식을 사용해 name=value 패턴을 탐색해 접근

// 주어진 이름의 쿠키를 반환하는데,
// 조건에 맞는 쿠키가 없다면 undefined를 반환합니다.
function getCookie(name) {
  let matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}

setCookie(name,value,options) : 현재 경로를 기본으로 주어진 name과 value를 가진 쿠키를 설정

function setCookie(name, value, options = {}) {

  options = {
    path: '/',
    // 필요한 경우, 옵션 기본값을 설정할 수도 있습니다.
    ...options
  };

  if (options.expires instanceof Date) {
    options.expires = options.expires.toUTCString();
  }

  let updatedCookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);

  for (let optionKey in options) {
    updatedCookie += "; " + optionKey;
    let optionValue = options[optionKey];
    if (optionValue !== true) {
      updatedCookie += "=" + optionValue;
    }
  }

  document.cookie = updatedCookie;
}

// Example of use:
setCookie('user', 'John', {secure: true, 'max-age': 3600});

deleteCookie(name) :  만료 기간을 음수로 설정

function deleteCookie(name) {
  setCookie(name, "", {
    'max-age': -1
  })
}

01  Web Storage 웹 스토리지

웹 스토리지 (web storage)는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능이다.

웹 스토리지와 쿠키의 기능 자체는 유사하지만, 웹 스토리지 방식을 사용하는 이유는 다음과 같다.

 

• 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않아 쿠키(4KB)보다 더 많은 자료를 보관할 수 있음(최소 2MB 이상)
• HTTP 헤더를 통해 스토리지 객체를 조작할 수 없고, 모두 자바스크립트 내에서 수행됨
• 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없음

웹 스토리지에는 로컬 스토리지 (local Storage)와 세션 스토리지 (session Storage)가 있다. 로컬 스토리지와 세션 스토리지는 각각의 고유한 특성이 있으며, 필요에 따라 선택적으로 사용된다.

기본적으로 두 스토리지 객체는 동일한 메서드와 프로퍼티를 제공한다.

 

• setItem(key, value) – 키-값 쌍을 보관
• getItem(key) – 키에 해당하는 값을 획득
• removeItem(key) – 키와 해당 값을 삭제
• clear() – 모든 것을 삭제
• key(index) – 인덱스(index)에 해당하는 키를 획득
• length – 저장된 항목의 개수를 획득

02  LocalStorage 로컬 스토리지

로컬 스토리지는 브라우저에 반영구적으로 데이터를 저장하며, 브라우저를 종료해도 데이터가 유지된다. 브라우저 자체에 반영구적으로 데이터가 유지되지만, 도메인 (domain)이 다른 경우에는 로컬 스토리지에 접근할 수 없다.

 

localStorage 쓰기

localStorage.setItem('key',value);
localStorage.key=value;

localStorage 접근

localStorage.getItem('key');
localStorage.key;

localStorage 삭제

localStorage.removeItem('key')
localStorage.clear()

** 활용 예시:

localStorage를 활용해 Dark mode 구현

Build a Dark Mode Toggle with JavaScript and localStorage

03  SessionStorage 세션 스토리지

쿠키가 노출되는 보안 문제를 방지하기 위함세션 스토리지는 각 세션마다 데이터가 개별적으로 저장된다. 예를 들어, 브라우저에서 여러개의 탭을 실행하면 탭마다 개별적으로 데이터가 저장되는 것이다. 세션 스토리지는 로컬 스토리지와 다르게 세션을 종료하면 데이터가 자동으로 제거되며, 같은 도메인이라도 세션이 다르면 데이터에 접근할 수 없다.

 

sessionStorage 쓰기

sessionStorage.setItem('key',value);
sessionStorage.key=value;

sessionStorage 접근

sessionStorage.getItem('key');
sessionStorage[key];

sessionStorage 삭제

sessionStorage.removeItem('key')
sessionStorage.clear()

* 데이터 포맷 JSON

JSON (JavaScript Object Notation) : 자바스크립트에서 사용할 용도로 만들어진 데이터 포맷

문자열 형태만 저장 가능하기 때문에 제약이 생기는 부분을 JSON 포맷으로 변환해 객체를 저장할 수 있다.

localStorage.user = JSON.stringify({name: "John"});

// 잠시 후
let user = JSON.parse( localStorage.user );
alert( user.name ); // John

---

참고 자료

 

https://ko.javascript.info/cookie

https://ko.javascript.info/localstorage

https://untitledtblog.tistory.com/47

https://lovefor-you.tistory.com/247

https://nsinc.tistory.com/121