localStorage와 sessionStorage의 차이점

브라우저에서 호스팅되는 웹사이트는 사용자 데이터를 저장할 메모리 용량이 없습니다. 웹사이트의 한 페이지에서 다른 페이지로 방문하는 사용자는 매번 새로운 사용자로 취급됩니다. 브라우저는 이 문제를 극복하기 위해 다양한 유형의 저장 메커니즘(localStorage, sessionStorage, 쿠키)을 제공합니다. 저장 메커니즘을 사용하면 방문 중인 웹사이트가 한 페이지에서 다른 페이지로의 이동을 추적할 수 있으므로 웹사이트에 이미 제공된 동일한 정보가 묻지 않습니다.

localStorage, sessionStorage 및 쿠키는 모두 사용자 시스템의 단일 파일에 저장하는 클라이언트 스토리지 솔루션입니다. 세션 데이터는 애플리케이션/웹사이트가 호스팅되는 서버에 저장됩니다. 웹 스토리지 API의 일부인 localStorage 및 sessionStorage는 데이터를 키/값 쌍 형식으로 로컬에 저장하는 두 가지 멋진 도구입니다.

이 기사에서는 localStorage와 sessionStorage의 차이점을 이해하려고 노력할 것입니다.

로컬스토리지란?

웹사이트/어플리케이션이 만료 날짜 없이 브라우저에 데이터를 저장하고 액세스할 수 있도록 하는 웹 스토리지 유형입니다. 즉, 브라우저에 저장된 데이터는 브라우저 창이 닫힌 후에도 유지됩니다.

통사론:

// Save data to localStorage
localStorage.setItem('key', 'Value');

// Get saved data from localStorage
let lastname = localStorage.getItem('key');

// Remove saved data from localStorage
localStorage.removeItem('key');

// Remove all saved data from localStorage
localStorage.clear();

세션스토리지란?

sessionStorage 객체는 하나의 세션에 대한 데이터만 저장합니다. 즉, 브라우저 탭이 닫히면 데이터가 삭제됩니다.

통사론:

// Save data to sessionStorage
sessionStorage.setItem('key', 'value');

// Get saved data from sessionStorage
let lastname = sessionStorage.getItem('key');

// Remove saved data from sessionStorage
sessionStorage.removeItem('key');

// Remove all saved data from sessionStorage
sessionStorage.clear();

localStorage와 sessionStorage의 차이점

로컬 스토리지

localStorage로 저장된 데이터는 만료 날짜가 없으며 JavaScript를 통해서만 지워지거나 브라우저 캐시/로컬에 저장된 데이터를 지워야 합니다.

저장 한도는 세 가지 중 최대입니다.

localStorage에 저장된 데이터는 명시적으로 삭제될 때까지 유지됩니다. 변경 사항은 저장되어 현재 및 향후 사이트 방문 시 사용할 수 있습니다.

동일 출처 정책에서 작동합니다. 따라서 저장된 데이터는 동일한 출처에서만 사용할 수 있습니다.

세션 스토리지

세션에 대한 데이터만 저장합니다. 즉, 브라우저(또는 탭)가 닫힐 때까지 데이터가 저장됩니다.

데이터가 서버로 전송되지 않습니다.

변경 사항은 창(또는 Chrome 및 Firefox와 같은 브라우저의 탭)별로만 사용할 수 있습니다. 변경 사항은 저장되어 현재 페이지와 동일한 창에서 향후 사이트 방문에 사용할 수 있습니다. 창이 닫히면 스토리지가 삭제됩니다.

결론:

localStorage와 sessionStorage는 유사한 작업을 수행하지만 몇 가지 매우 기본적인 차이점이 있습니다.

이 기사는 원래 JsonWorld에 게시되었습니다.