01. Cookie
Javascript를 사용하면서 값을 저장할 때 변수를 사용하는 것처럼 화면 이동이 있거나 영구적으로 DB에 저장이 필요한 경우, 또는 임시적으로 저장하고 싶을 때 쿠키(cookie) 를 사용하게 됩니다.
이와 같이 어떤 값을 영구 저장하거나 임시 저장을 하고 싶은 경우에 WebStorage API인 LocalStorage(로컬 스토리지) 을 이용하여 저장을 할 수 있습니다.
02. Local storage VS. Session storage
Web Storage Object(웹 스토리지 객체)인 LocalStorage와 SesstionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해줍니다. 이 둘을 사용하면 페이지를 새로 고침하거나(SesstionStorage) 브라우저를 다시 실행해도(LocalStorage와) 데이터가 사라지지 않고 남아 있도록 할 수 있습니다.
여기서 의문점 🤔
✅ cookie를 사용하면 브라우저에 데이터를 저장할 수 있는데, 왜 또 다른 객체를 사용해 데이터를 저장하는 걸까요? 🧐
cookie 이외에도 다른 방식을 사용하는 이유는 다음과 같습니다.
1️⃣ cookie와 다르게 Web Storage Object는 네트워크 요청 시, 서버로 전송되지 않습니다.
이러한 특징으로 인해 Web Storage Object는 cookie보다 더 많은 자료를 보관할 수 있습니다.
대부분의 브라우저가 최소 2MB 혹은 그 이상의 Web Storage Object를 저장할 수 있도록 해줍니다.
또한, 개발자는 브라우저 내 웹 스토리지 구성 방식을 설정할 수도 있습니다.
2️⃣ cookie와 또 다른 점은 서버가 HTTP header를 통해 Storage Object를 조작할 수 없다는 것입니다.
왜냐하면 Web Storage Object 조작은 모두 JavaScript 내에서 수행되기 때문입니다.
3️⃣ Web Storage Object는 도메인-프로토콜-포트로 정의되는 Origin(오리진)에 묶여있는데요.
따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근을 할 수가 없습니다.🗒 출처
- https://ponyozzang.tistory.com/341 - tistory | 포뇨아빠 님
- https://developer.mozilla.org/ko/docs/Web/API/Window/sessionStorage - MDN | sessionStorage
- https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage - MDN | localStorage
- https://ko.javascript.info/localstorage - javascript.info | 브라우저에 데이터 저장하기
