当我尝试从我网站的其他页面访问它们时，如何从缓存中获取 web 页面并恢复 forms 中的数据？

Question

我的网站上有几页 forms 。 我也有面包屑导航和主导航。 从某种意义上说，主导航和面包屑非常相似。

但我想要的是，当我们点击面包屑链接时，我们将 go 指向缓存中的页面，其中包含我们之前在 forms 中填写的数据。

铁

我有第 1 页、第 2 页、第 3 页。 我go到page1，把一些数据放到一个表格里。 然后 go 到 page2 或 page3。 我想 go 从我的面包屑导航返回到 page1 并查看我已经放入表单的所有数据。

历史.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

I think you can use both https://api.jquery.com/serializeArray/ and https://developer.mozilla.org/fr/docs/Web/API/Window/localStorage to save your data as json to the local storage并在任何页面中检索它们。 更改页面时必须这样做：

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

如果不清楚，请随时问我