Kann jemand diesen Sitzungsspeichercode erklären?

Question

Ich habe den Code von jemand anderem durchgesehen und die Dinge ein wenig verbessert, und ich bin auf einen Code gestoßen, den ich nicht ganz verstehe. Könnten Sie mir erklären, was hier vor sich geht und welche Auswirkungen es auf die Implementierung hat, und vielleicht eine bessere Lösung, um den Sitzungsspeicher für den Anwendungsfall zu verwalten oder einfach nur einen besseren Weg, den Code zu schreiben?

//Load Content from Cache if this is not a Refresh or new Page Load 
     if ((document.referrer!=null)&&(sessionStorage.getItem('lastReferrer')!=document.referrer)){ 
      if (('sessionStorage' in window) && (window['sessionStorage'] !== null)) { 
      if ('@Name'+window.location.href in sessionStorage){ 
       $("#@Name").html(sessionStorage.getItem('@Name'+window.location.href)); 
       $(window).scrollTop(sessionStorage.getItem('@Name'+'ScrollPos'+window.location.href)); 
       jQuery.data($('#ResponderScripts')[0],'cs_page',sessionStorage.getItem('@Name'+'Page'+window.location.href)); 
       jQuery.data($('#ResponderScripts')[0],'cs_totalPages',sessionStorage.getItem('@Name'+'TotalPage'+window.location.href)); 
       pageLoadedFromCache=1; 
       console.log('Replaced from Cache: @name url='+window.location.href+' referrer='+document.referrer+' page='+$('#ResponderScripts').data("cs_page")); 
      } 
      } 
     }; 

     // Save Component Content when leaving the page. 
     $(window).unload(function() { 
      history.replaceState({}, document.title,window.location.href); 
      if (('sessionStorage' in window) && (window['sessionStorage'] !== null)) { 
      var componentContent = $("#@Name").html(); 
      if (componentContent!=null){ 
       sessionStorage.setItem('@Name'+window.location.href, componentContent); 
       sessionStorage.setItem('@Name'+'ScrollPos'+window.location.href,$(window).scrollTop()); 
       sessionStorage.setItem('@Name'+'Page'+window.location.href,$('#ResponderScripts').data("cs_page")); 
       sessionStorage.setItem('@Name'+'TotalPage'+window.location.href,$('#ResponderScripts').data("cs_totalPages")); 
       console.log('stored @name url='+window.location.href+' referrer='+document.referrer+' page='+sessionStorage.getItem('@Name'+'Page'+window.location.href)); 
      } 
      } 
     }); 

Danke jede Hilfe wird geschätzt! Wenn dies nicht der richtige Ort dafür ist, lass es mich wissen und ich kann es entfernen.

Answer 1

Dieser Ausschnitt scheint ziemlich klar und durchdacht zu sein, aber ich zerlege, was vor sich geht.

if ((document.referrer != null) && (sessionStorage.getItem('lastReferrer') != document.referrer)) 

Also hier bestimmen wir, ob die Sitzung kontinuierlich ist. Die Anweisung wird als wahr ausgewertet, wenn der Referrer und der letzte bekannte Sitzungsverweis unterschiedlich sind.

Hier bestimmen wir, ob SessionStorage ist sogar eine Sache im Browser, und ob es eingestellt wurde. Gibt true zurück, wenn es verfügbar und festgelegt ist. Ich würde dies außerhalb der Empfehlungsprüfung aus Sicherheitsgründen verschieben (Möglicher Null- oder undefinierter Zugriff).

if ('@Name'+window.location.href in sessionStorage) 

Jetzt bestimmen wir, ob die Seite selbst eine Eigenschaft im sessionStorage hat. Wenn dies der Fall ist, laden Sie den in sessionStorage gespeicherten Inhalt, anstatt die Seite zu laden.

Der nächste Abschnitt ist noch einfacher. Es wird eine Callback-Funktion aufgerufen, die aufgerufen wird, wenn die Seite entladen wird (Navigation, Schließen des Browsers usw.). Diese Funktion führt history.replaceState() aus und bestimmt, ob sessionStorage verfügbar ist (Again). Wenn dies der Fall ist, werden eine Reihe von Statusinformationen gespeichert, die beim nächsten Zugriff auf die Seite erneut geladen werden.

Die einzige Sache, die ich machen würde, ist, die Speicher- und Lade-Logik in die sessionStorage-Prüfung einzubinden. Wenn sessionStorage nicht verfügbar ist, warum verschwenden Sie Zeit mit den anderen Bedingungen überhaupt? Beachten Sie, dass dies im Zusammenhang mit dem Snippet steht und möglicherweise nicht im Kontext der gesamten App für Sie funktioniert.

Answer 2

Dieser Code soll eine Seite (paginierte Liste?) Im lokalen Speicher beibehalten, damit er aus dem Cache wiederhergestellt werden kann. Ich habe es so umgeschrieben, dass ich hoffe, dass es klarer wird.

var currentUrl = window.location.href; 

// ************************************** 
// Set some keys that can be used to access the localstore cache 
// ************************************** 
var lastHTMLContent_key = '@Name' + currentUrl; 
var lastScrollPosition_key = '@Name' + 'ScrollPos' + currentUrl; 
var lastPage_key = '@Name' + 'Page' + currentUrl; 
var lastPageTotal_key = '@Name' + 'TotalPage' + currentUrl; 
// ************************************** 

var $ResponderScripts = $('#ResponderScripts'); 
var $Target = $("#@Name"); 

// ************************************** 
// Some tests to determine if we can successfully retrieve an item from the cache 
// Note: Moved here for clarity. It is actually important to do these tests in a 
// way that prevents null references. 
// ************************************** 
var isSessionStorageAvailable = ('sessionStorage' in window && window['sessionStorage'] !== null); 
var isNewReferrer = (document.referrer != null && document.referrer != sessionStorage.getItem('lastReferrer'); 
var isURLInStore = (lastHTMLContent_key in sessionStorage); 
// ************************************** 

// ************************************** 
// Load Content from Cache if this is not a Refresh or new Page Load 
// ************************************** 
if (isSessionStorageAvailable && isNewReferrer && isURLInStore) { 

    pageLoadedFromCache = 1; 

    // ************************************** 
    // Fetch prior cached content 
    // ************************************** 
    var lastHTMLContent = sessionStorage.getItem(lastHTMLContent_key); 
    var lastScrollPosition = sessionStorage.getItem(lastScrollPosition_key); 
    var lastPage = sessionStorage.getItem(lastPage_key); 
    var lastPageTotal = sessionStorage.getItem(lastPageTotal_key); 
    // ************************************** 

    // ************************************** 
    // Set current content/context based on prior 
    // ************************************** 
    $Target.html(lastHTMLContent); 
    $(window).scrollTop(lastScrollPosition); 
    jQuery.data($ResponderScripts[0], 'cs_page', lastPage); 
    jQuery.data($ResponderScripts[0], 'cs_totalPages', lastPageTotal); 
    // ************************************** 

    console.log('Replaced from Cache: @name url=' + currentUrl + ' referrer=' + document.referrer + ' page=' + $('#ResponderScripts').data("cs_page")); 
} 
// ************************************** 

// ************************************** 
// Save Component Content when leaving the page. 
// ************************************** 
$(window).unload(function() { 

    history.replaceState({}, document.title, currentUrl); 

    if (isSessionStorageAvailable) { 
     var targetHTML = $Target.html(); 
     if (targetHTML != null){ 

      // ************************************** 
      // Save existing content for next time... 
      // ************************************** 
      sessionStorage.setItem(lastHTMLContent_key, targetHTML); 
      sessionStorage.setItem(lastScrollPosition_key, $(window).scrollTop()); 
      sessionStorage.setItem(lastPage_key, $ResponderScripts.data("cs_page")); 
      sessionStorage.setItem(lastPageTotal_key, $ResponderScripts.data("cs_totalPages")); 
      // ************************************** 

      console.log('stored @name url=' + currentUrl + ' referrer=' + document.referrer + ' page=' + $('#ResponderScripts').data("cs_page")); 

     } 
    } 

}); 
// ************************************** 

ich denke, das ist, wie ich Ansatz könnte die kompliziertere wenn:

if (
    window.sessionStorage && // we can work with sessionStorage 
    sessionStorage[lastHTMLContent_key] && // a value for this page is in the store 
    document.referrer && // there is a referrer 
    document.referrer != sessionStorage.getItem('lastReferrer') // the referrer is not the last referrer 
) { 
    // proper to use cache page data 
}