💻 쿠키 그리고 localStorage 와 sessionStorage

waterglasses·2022년 4월 4일

TIL localstorage sessionStorage 데브코스 쿠키 프로그래머스

TIL

목록 보기

12/50

로컬 스토리지와 세션 스토리지 그리고 쿠키에 대해서 정리해보았습니다.
⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다

📃 오늘 공부한 것

브라우저에 저장되는 작은 크기의 문자열로 HTTP 프로토콜의 일부이다.
쿠키는 클라이언트 식별과 같은 인증에 가장 많이 쓰인다.

쿠키 읽기

document.cookie

name=value쌍으로 구성되어 있고, 각 쌍은 ;로 구분한다. ;를 기준으로 document.cookie의 값을 분리하면 원하는 쿠키를 찾을 수 있다.

쿠키 쓰기

document.cookie = "user=waterglasses";

쿠키 유효기간 설정
expires나 mag-age 옵션을 설정한다.
유효기간이 지정되어 있지 않으면, 브라우저가 닫힐 때 쿠키도 함께 삭제된다. 이런 쿠키를 세션 쿠키라고 부른다.

localStorage와 sessionStorage

웹 스토리지 객체 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해준다.
쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않기 때문에 쿠키보다 더 많은 자료를 보관할 수 있다. 또한 쿠키와 또 다르점은 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다는 것이다.

localStorage

오리진(domain/port/protocol)이 같은 경우 모든 탭과 창에서 공유되고 브라우저나 OS가 재시작하더라도 데이터가 파괴되지 않는다.

추가하기

localStorage.setItem('test', 1);
localStorage.name = 'waterglasses';
localStorage['name'] = 'waterglasses';

읽어오기

localStorage.getItem('test'); //1

sessionStorage

localStorage객체에 비해 자주 사용되지는 않는다. 제공하는 프로퍼티와 메서드는 같지만, 훨씬 제한적이기 때문이다.
sessionStorage는 현재 떠 있는 탭에서만 유지된다. 페이지를 새로고침할 때 sessionStorage에 저장된 데이터는 사라지지 않지만 탭을 닫고 열 때는 사라진다.

🔥 오늘의 느낀점

정리는 로컬 스토리지와 세션 스토리지를 위주로 정리하였지만 TodoList 구현을 위주로 공부하였다.
어떻게 하면 컴포넌트화 시켜서 확장시키는지에 대해서 조금은 알 것만 같았던 날이다. 과제를 시작하려면 이것에 대해서 체화시켜야야만 할 것 같다. 이번에는 과제에 여러가지 살을 붙여서 진행해보려고 생각했지만 과제 주요 구현사항도 제대로 못할 것 같아 기본에만 충실하려고 한다.