JavaScript와 함께 세션 스토리지를 사용하여 웹 애플리케이션 성능 향상

소개

일상 업무에서 clinical information from multiple sources을 통합하는 웹 응용 프로그램 작업을 합니다. 이러한 소스 중 하나는 Health Information Exchange입니다. 환자에 따라 복잡한 병력이 있는 환자의 데이터를 반환하는 데 몇 초가 걸릴 수 있습니다.

이와 같이 AJAX 요청을 통해 데이터가 반환되므로 건강 정보 교환이 응답하는 동안 사용자에게 진행률 표시줄을 표시할 수 있습니다. 이 기사에서는 sessionStorage를 사용하여 결과를 캐시하고 웹 애플리케이션이 사용자에게 더 잘 반응하도록 만드는 방법을 보여줍니다.

Web Storage API은 브라우저가 쿠키를 사용하는 것보다 훨씬 더 직관적인 방식으로 키/값 쌍을 저장할 수 있는 메커니즘을 제공합니다. Web Storage API는 데이터 캐싱을 위한 두 가지 메커니즘인 localStorage 및 sessionStorage를 제공합니다.

localStorage API는 브라우저를 닫았다가 다시 열어도 데이터를 유지합니다. 만료 날짜 없이 데이터를 저장하고 JavaScript 또는 브라우저 캐시 지우기를 통해서만 지워집니다. 내 웹 애플리케이션이 임상 데이터를 보유하고 있기 때문에 브라우징 세션 간에 해당 데이터를 캐시하고 싶지 않았습니다.

따라서 저는 주어진 각 출처에 대해 별도의 저장 영역을 유지 관리하는 sessionStorage를 선택합니다. 세션에 대해서만 데이터를 저장합니다. 즉, 정보는 브라우저(또는 탭)가 닫힐 때까지만 저장됩니다. 데이터는 서버로 전송되지 않습니다. 또한 쿠키보다 저장 한계가 훨씬 커서 최대 5MB의 데이터를 저장할 수 있습니다.

sessionStorage.getItem

먼저 캐시에 이미 저장된 항목이 있는지 확인하려면 getItem 함수를 사용해야 합니다. getItem 함수에는 하나의 매개변수인 키 이름이 있습니다.
검색하려는 키의 이름이 포함된 문자열.

캐시가 비어 있으면 null과 같은지 확인하여 AJAX 요청을 수행합니다. 캐시가 비어 있지 않으면 getItem 함수를 사용하여 캐시에서 HTML 코드를 로드하고 id 속성이 LloyedGeorge인 HTML 요소를 할당합니다.

Lloyed George은 paper patient records을 발명한 것으로 알려진 사람이며 이것은 의료 응용 프로그램이므로 그의 이름을 변수로 사용하는 것은 사람에게 모자 팁입니다. 아래 샘플의 자리 표시자 .Patient.LloyedGeorge는 각 환자의 고유한 값으로 대체됩니다. 이렇게 하면 사용자가 여러 환자 기록을 보는 경우 다른 환자에 대해 캐시된 데이터가 검색되어 잘못 표시되지 않습니다.

애플리케이션 내에서 의미가 있는 고유한 키 이름을 사용하는 것이 좋습니다.

if (sessionStorage.getItem(".Patient.LloyedGeorge") === null) {
    xds_ajax_request();
} else {
    document.getElementById("LloyedGeorge").innerHTML = sessionStorage.getItem(".Patient.LloyedGeorge");
}

sessionStorage.setItem

AJAX 호출이 유효한 결과로 응답하면 LloyedGeorge의 id 속성을 사용하여 HTML 요소에 responseText를 할당합니다.

또한 setItem 함수 호출을 사용하여 responseText의 복사본을 세션 저장소에 저장합니다. setItem 함수는 두 개의 매개변수를 허용합니다. 첫 번째는 생성/업데이트하려는 키의 이름이 포함된 문자열인 키 이름입니다. 두 번째는 생성하거나 업데이트하는 키에 제공하려는 값을 포함하는 문자열인 키 값입니다.

AJAX 응답을 세션 저장소에 저장하면 웹 페이지를 새로 고칠 수 있으며 위의 코드 예제가 세션 저장소에서 직접 데이터를 로드하므로 AJAX 호출이 트리거되지 않습니다. 다시 말하지만 데이터가 즉시 표시되므로 애플리케이션이 빠르게 느껴집니다.

if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
    document.getElementById("LloyedGeorge").innerHTML = xmlHttp.responseText;
    sessionStorage.setItem(".Patient.LloyedGeorge", xmlHttp.responseText);
}

sessionStorage.removeItem

sessionStorage API를 사용하기로 결정한 경우 애플리케이션이 AJAX 끝점/서비스를 다시 쿼리할 수 있도록 사용자가 캐시를 무효화하는 방법이 필요합니다. 모바일 애플리케이션에서는 pull to refresh 제스처이거나 사용자가 눌러야 하는 버튼일 수 있습니다. 어느 쪽이든 새로 고침 이벤트는 캐시를 무효화하기 위해 removeItem 함수를 호출해야 합니다.

removeItem 함수에는 제거하려는 키의 키 이름이라는 하나의 매개변수가 있습니다.

function force_refresh() {
    sessionStorage.removeItem('.Patient.LloyedGeorge');
}

도움이나 조언이 필요합니다

웹 애플리케이션 성능 향상에 대한 도움이나 조언이 필요하면 주저하지 말고 Twitter를 통해 저에게 연락하십시오. 로 다이렉트 메시지를 보내주세요.