Cookie & Local Storage
📝 간단한 개인 TodoList 사이트 만들기
todolist를 웹브라우저가 닫혀도 저장할 수 있도록 하고 싶었다.
DB 사용이 아닌 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 data = new Date();
date.setDate(date.getDate() + 1);
document.cookie = `cookie=js expires=${date.toGMTString()}`;data.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가 생성이 된다.
- 도메인만 같다면 여러탭 내에서 같은 Storage가 공유된다.
- 직접 삭제하는 경우가 아니면 삭제되지 않는다.
❓ 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 에서 데이터를 저장하여 활동하면 된다.
출처: https://ghost4551.tistory.com/132 [프론트엔드 개발자의 기록 공간:티스토리]
