[JavaScript] Client Side에서 데이터를 저장하기

💡 간단한 개인 TodoList 사이트를 만든다고 가정하자.

하루마다 해야 할 목록을 어떻게 웹 브라우저가 닫혀도 저장할 수 있을까?

DB만이 답일까?... No!  Cookie와 Local Storage를 활용하면 된다.!

 

1) 🍪 Cookie

하이퍼 텍스트의 기록서(HTTP)의 일종으로서 인터넷 사용자가 어떠한 웹사이트를 방문할 경우 그 사이트가 사용하고 있는 서버를 통해 인터넷 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일을 일컫는다.

쇼핑몰 사이트를 방문하여 이것저것 보았을때, 하단에 최근 본 상품이라는 것을 본 적이 있을 것이다.
또한 팝업창에 오늘 하루 안보기 체크와 같은 정보들은 모두 쿠키에 저장되어 관리된다.

개념은 이정도로만 간단하게 설명하고 그럼 JS에서는 어떻게 Cookie를 사용하고 관리 할까?

 

❓ Cookie 저장하는법

document.cookie = "cookie=js"

기존에 있던 cookie에 key : cookie, value : js 쌍으로 저장이 된다.

 

개발자 도구에서 확인이 가능한 것을 볼 수 있다.

 

❓ Cookie 가져오는 법

document.cookie

위의 코드를 통해 cookie에 저장된 값들을 읽어올 수 있다.

각 쿠키는 ; 로 구분되어 있어서 split로 쪼개고 다시 한번 key, value에 맞게 쪼개서 적절히 사용하면 된다.

대략 이런식으로 활용할 수 있다.

 

❓ Cookie에 유효기간 넣기

 

Cookie에 유효기간을 지정하지 않으면 브라우저가 종료되면 쿠키값은 사라진다.

1) 그리니치 표준시(GMT)를 사용하여 유효기간을 넣는다.

document.cookie = "cookie=js; expires=Wed, 18 Aug 2021 20:00:00 GMT";

위와 같이 직접 넣어줄 수 도 있지만, 보통 오늘날짜 기준으로 며칠 뒤까지 유효기간을 설정하는 것이 보통일 것이다.

그럴 경우 다음과 같이 설정해주면 된다.

 

let date = new Date();
date.setDate(date.getDate() + 1);
document.cookie = `cookie=js; expires=${date.toGMTString()}`;

date.getDate()로 오늘날짜를 받아와 +1(하루)를 더 해주고 그것을 setDate로 저장해주고 템플릿 리터럴을 이용해서 넣어주면 된다.

 

2) max-age로 설정

설정된 값 기준으로 언제 뒤 까지 유효하다를 나타냄

document.cookie = "cookie=js; max-age=3600";

max-age의 단위는 1초이다 3600은 1시간을 의미한다. 이렇게 직접 시간을 지정해서 설정할 수 도 있다.

 

❗ Cookie 주의 사항

• HTTP 요청시 헤더에 cookie가 포함되기 때문에 HTTP 요청 크기가 커진다.
• 크기 제한이 있다.
• 보안 취약점이 존재한다.

 

2) 👨‍💻 Local Storage

• cookie와 마찬가지로 개발자 도구에서 확인가능하고 key, value쌍으로 저장이 된다.
• 도메인 기반으로 Storage가 생성이 된다.
• 도메인만 같다면 여러탭 내에서 같은 Strorage가 공유된다.
• 직접 삭제하는 경우가 아니면 삭제되지 않는다.

❓ Local Storage 저장하는법

window.localStorage.cookie = "js";
window.localStorage[cookie] = "js";
window.localStorage.setItem("cookie","js");

setItem을 이용하는 것을 권장함..  나머지는 특정한 상황시에 내장함수를 덮어 씌우는 경우 발생.

또한 Local Storage는 string만 넣을 수 있다. 그래서 만약 객체를 넣고 싶으면 JSON.stringify로 넣고,

JSON.parse로 가져온다.

 

❓ Local Storage 가져오는 법

localStorage.getItem("cookie"); //불러오기
localStorage.removeItem("cookie"); //삭제하기
localStorage.clear() //전체 삭제

 

위와 같은 방법으로 간단한 프로젝트시 Client Side에서 데이터를 저장하여 활용하면 된다.