javascript - 谁能解释一下这个 session 存储代码吗？

Question

我一直在检查别人的代码并稍微修复一些问题，但我遇到了一些我不太理解的代码。您能否向我解释一下这里发生了什么以及它的实现方式的含义，以及处理用例的 session 存储的更好的解决方案，或者只是编写代码的更好方法？

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

所以这里我们判断 session 是否是连续的。如果引用者和最后一个已知 session 引用者不同，则该语句评估为 true。

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

这里我们确定 sessionStorage 是否是浏览器中的一个东西，以及它是否已被设置。如果可用并已设置，则返回 true。出于安全考虑，我会将其移到引用检查之外(可能为空或未定义的访问)。

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

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

下一部分就更简单了。它注册一个回调函数，在页面卸载(导航、浏览器关闭等)时调用。该函数执行history.replaceState()并确定sessionStorage是否为可用(再次)。如果是，它会保存一堆状态信息，以便下次访问页面时重新加载。

我唯一要做的就是将保存和加载逻辑包装在 sessionStorage 检查中。如果 sessionStorage 不可用，为什么还要在其他条件上浪费时间呢？请注意，这是在代码片段的上下文中，在完整应用程序的上下文中可能不适合您。