브라우저 저장공간

브라우저에는 데이터를 저장할 수 있는 공간이 따로 존재한다. 브라우저 저장공간에 저장된 데이터는 브라우저 새로고침 후에도 데이터가 존재한다는 특징을 갖는다. 따라서 웹사이트를 이용할 때 사용되는 로그인 정보들은 DB가 아닌 브라우저 저장공간에 저장된다. 또한 제품 구매시 장바구니에 담아둔 품목이 사라지지 않는 이유도 장바구니 목록 데이터가 브라우저 저장공간에 저장되기 때문이다.

LocalStorage

특징

1. 데이터를 브라우저에 저장한다.
2. 브라우저를 종료 또는 새로고침해도 저장된 데이터가 남아있다.

// 로컬 스토리지 저장
const onClickSaveLocal = () => {
  localStorage.setItem("bbb", "영희");
};

// 로컬 스토리지 조회
const onClickGetLocal = () => {
  const bbb = localStorage.getItem("bbb");
  console.log(bbb);
};

SessionStorage

특징

1. 데이터를 브라우저에 저장한다.
2. 브라우저를 종료하면 저장된 데이터가 삭제된다.

// 세션 스토리지 저장
const onClickSaveSession = () => {
  sessionStorage.setItem("ccc", "훈이");
};

// 세션 스토리지 조회
const onClickGetSession = () => {
  const ccc = sessionStorage.getItem("ccc");
  console.log(ccc);
};

Cookie

특징

1. 만료시간을 갖는다.
2. API 요청 시 쿠키정보를 함께 전달하거나 백엔드로부터 쿠키를 응답으로 받을 수 있다.
3. httpOnly, Secure등의 옵션 설정이 가능하다.
4. 브라우저를 종료한 후에도 데이터가 남아있다.

httpOnly : 브라우저에서 Javascript를 이용해 쿠키에 접근할 수 없다. 통신으로만 해당 데이터를 주고받을 수 있다.
secure : https 통신시에만 해당 쿠키를 받아올 수 있다.

// 쿠키 저장
const onClickSaveCookie = () => {
    document.cookie = "aaa=철수"
}

// 쿠키 조회
const onClickGetCookie = () => {
    const mycookie = document.cookie
    console.log(mycookie)
}

쿠키의 경우 로컬과 세션스토리지와 다르게 쿠키를 조회하면 쿠키 전체를 가져와서 보여준다.
따라서 해당 key에 대한 value만 조회해주는 추가적인 작업이 필요하다.