웹 페이지에서 데이터 보존

쿼리 매개변수를 사용하여 HTML 페이지 간에 데이터를 전달하면 URL에서 데이터 가시성 문제가 발생합니다. 다행히 JavaScript와 jQuery에는 페이지 간에 데이터를 전달하기 위한 대체 메커니즘이 있습니다.

HTML5 저장소 객체 활용

이 문제를 해결하기 위해 HTML5는 sessionStorage와 같은 저장소 객체를 제공하고 로컬스토리지. 이러한 객체는 브라우저의 로컬 저장소 내에 데이터를 임시 또는 영구적으로 저장하는 수단을 제공하여 나중에 편리하게 검색할 수 있도록 합니다.

세션 저장소

단일 브라우저 세션인 경우 sessionStorage가 이상적입니다. sessionStorage에 저장된 데이터는 세션이 종료될 때까지(예: 브라우저 탭이 닫힐 때) 계속 액세스할 수 있습니다.

sessionStorage.setItem('label', 'value');
sessionStorage.getItem('label');

로컬 저장소

보다 영구적인 저장소를 원한다면 localStorage가 솔루션입니다. localStorage에 저장된 데이터는 브라우저를 닫았다가 다시 연 후에도 유지됩니다.

localStorage.setItem('label', 'value');
localStorage.getItem('label');

HTML5 저장소 객체의 이점

• 데이터는 숨겨진 상태로 유지되므로 URL 가시성에 대한 우려가 없습니다.
• 저장된 값은 여러 페이지에 걸쳐 유지되며 브라우저를 새로 고친 후에도(localStorage의 경우) 유지됩니다.
• 페이지 간에 공유해야 하는 중간 양식 데이터 또는 기타 필수 정보를 저장하는 데 적합합니다.