javascript - 当我尝试从网站的其他页面访问网页时，如何从缓存中获取网页并恢复表单中的数据？

Question

我的网站上有几个带有表单的页面。我还有面包屑导航和主导航。从某种意义上说，主导航和面包屑导航非常相似。

但我想要的是，当我们单击面包屑链接时，我们会从缓存中转到包含我们之前填写​​表单的数据的页面。

F.e.

我有第1页、第2页、第3页。 我转到第 1 页，将一些数据放入表单中。然后转到第 2 页或第 3 页。 我想从面包屑导航返回到 page1，并查看我已放入表单中的所有数据。

history.back();或history.go();在这种情况下不起作用，因为对于这种方法，我们需要丰富层次结构中最后一页的严格逻辑。但就我而言，它不起作用，因为我同时拥有:主导航和重复它的面包屑(请不要问为什么)，并且丰富层次结构中最后一页的逻辑可能很困惑。

我尝试使用 windows.location.reload();因为默认情况下，它应该从缓存中重新加载页面。但这不起作用。也许我以错误的方式使用它。或者有另一种方法可以解决这个问题。

html

<nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="page1.url">Page One</a></li>
                <li class="breadcrumb-item"><a href="page2.url">Page Two</a></li>
                <li class="breadcrumb-item active" >Page Thre</li>
                
            </ol>
</nav>

js

$(window).load(function(){    
        $('.breadcrumb-item a').each(function(index) {
            var link = $(this).prop('href');
            $(this).on("click", function(){
                link = windows.location.reload();
            })            
        });
    });

Answer 1

我认为你可以同时使用 https://api.jquery.com/serializeArray/和 https://developer.mozilla.org/fr/docs/Web/API/Window/localStorage将数据以 json 形式保存到本地存储并在任何页面中检索它们。更改页面时必须执行此操作:

jsonData = $("form").serializeArray()
localStorage.setItem('pageOneData', jsonData);

有不懂的可以问我