Question

我已经经历了其他人的代码并且修改了一些内容并且我遇到了一些我不太了解的代码。您能否向我解释一下这里发生了什么？它是如何实现的，以及可能更好的解决方案来处理用例的会话存储或者只是更好的编写代码的方法？

//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));
            }
          }
        });

感谢任何帮助表示赞赏！如果这不是这个地方让我知道，我可以删除它。

Answer 1

这个片段看起来非常清晰，并且想到了我，但我会分解正在发生的事情。

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

所以在这里我们确定会话是否是连续的。如果引用者和最后一个已知的会话引用者不同，则该语句的结果为真。

if (('sessionStorage' in window) && (window['sessionStorage'] !== null))

这里我们确定sessionStorage是否是浏览器中的东西，以及它是否已设置。如果可用并设置，则返回true。我在推荐检查之外移动它以确保安全问题（可能为空或未定义访问）。

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

现在我们确定页面本身是否在sessionStorage中有属性。如果是，则加载存储在sessionStorage中的内容，而不是加载页面。

下一部分更容易。它会在卸载页面时注册要调用的回调函数（导航，浏览器关闭等）。此函数执行history.replaceState()并确定sessionStorage是否可用（再次）。如果是，它会在下次访问页面时保存一堆状态信息以重新加载。

我唯一要做的就是在sessionStorage检查中包含save和load逻辑。如果sessionStorage不可用，为什么要浪费时间在其他条件上呢？请注意，这是在代码段的上下文中，在完整应用程序的上下文中可能无法解决。

Answer 2

此代码看起来是在本地存储中保留页面（分页列表？），以便可以从缓存重构。我以一种希望增加清晰度的方式重写了它。

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"));

        }
    }

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

我认为这就是我如何处理更复杂的 if ：

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
}

谁能解释这个会话存储代码？

2 个答案: