쿠키, localStorage 또는 sessionStorage?

쿠키, localStorage 및 sessionStorage는 모두 클라이언트 측 저장을 위한 간단한 데이터 저장 방식입니다. 쿠키는 클라이언트 측에 저장된 간단한 데이터를 처리하는 구식 방식에 가깝습니다. HTML5에서는 localStorage 또는 sessionStorage와 같은 웹 저장소가 도입되었으며 사용하기도 더 쉽습니다.

쿠키

지속성: 사용자는 각 쿠키의 만료 시간을 설정할 수 있습니다.

저장: 전체 쿠키 데이터를 위한 공간은 약 4KB에 불과합니다.

트래픽: 모든 HTTP 요청에 대해 데이터를 서버로 다시 보내야 하므로 클라이언트와 서버 간의 트래픽이 증가합니다.

오래된 브라우저에서 작동합니다.

로컬 스토리지

지속성: 데이터는 삭제될 때까지 존재합니다.

저장 공간: 사용 가능한 공간이 약 5MB로 증가합니다.

트래픽: 모든 HTTP 요청이 데이터를 서버로 다시 보낼 필요가 없기 때문에 트래픽이 적습니다.

도메인: 데이터는 동일한 도메인에만 유지됩니다. 즉, 데이터가 웹사이트 A에 저장되어 있으면 다음 번에는 웹사이트 A에서만 액세스할 수 있습니다. 여기서 사용된 도메인을 명확하게 하기 위해 동일한 웹사이트 필드를 의미합니다. 예를 들어 탐색 중인 Facebook의 다른 게시물이나 다른 개인 페이지는 모두 facebook.com 아래에 있습니다. 결과적으로 해당 페이지는 모두 동일한 도메인에 속합니다.

세션 저장소

sessionStorage는 localStorage와 유사합니다. 유일한 차이점은 데이터의 지속성입니다. sessionStorage의 경우 사용자가 탭이나 창을 닫는 등 도메인을 떠나면 sessionStorage가 비워집니다.

localStorage 및 sessionStorage를 사용하는 방법은 무엇입니까?

localStorage와 sessionStorage 모두 키-값 쌍을 사용하며 구문은 유사합니다. 다음은 그 예입니다.

통사론

//To store the data:
localStorage.setItem(“key”,”value”);

//To retrieve the data:
localStorage.getItem(“key”);

//To update the data (the same as to store the data):
localStorage.setItem(“key”,”value”);

//To remove one entry:
localStorage.removeItem(“key”);

//To clear all the data:
localStorage.clear();