当我试图从我网站的其他页面访问它们时,如何从缓存中获取网页并恢复表单中的数据?

How to get the web pages from cache and restore data in the forms when i try to reach them from other pages of my site?

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

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

F.e.

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

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

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

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

有什么不明白可以随时问我