页面刷新后如何保留div内容答案

【问题标题】：how to retain the div contents after page refresh页面刷新后如何保留div内容
【发布时间】：2023-03-28 00:40:02
【问题描述】：

我正在使用 Jquery 创建一个动态 div，我正在尝试缓存它，以便在页面刷新后将其取回，请帮助了解如何实现这一点，

粘贴下面的代码

<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="jQuery.jCache.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
    $.jCache.maxSize = 20;
    function createDiv() {

        var divTemp = "<div><label>This is a Label</Label></div>";
        alert(divTemp);
        $(divTemp).appendTo("#divDisplay");
        $.jCache.setItem("myKey", divTemp);
    }

    $(document).ready(function() {


    if ($.jCache.hasItem("myKey")) {
        var cacheDiv = $.jCache.getItem("myKey");
            var cacheDiv = cacheDiv + "<a>anchor Tag</a>";
            $(cacheDiv).appendTo("#divDisplay");

        }
    }); 
</script>

我正在尝试使用按钮单击在页面中绘制 div，在页面中绘制单击 div 后，当使用 F5 单击刷新时，div 消失，有没有办法使用缓存来保留 div 内容机制？

这对我的整个功能来说是个大惊喜！

提前致谢，沙约

【问题讨论】：

标签： jquery caching

【解决方案1】：

您可能误解了 jCache 的工作方式。每当您（重新）加载页面时，缓存就会有效地被清除，因为浏览器将启动一个新的 JavaScript 执行环境。这种浏览器行为是有道理的，因为它阻止了不同网站上的 JS 能够相互交互，从而产生了一个很大的安全漏洞。如果您使用jCache demo，您可以通过填充演示缓存、重新加载页面并注意到缓存为空来测试此行为。

对于您的特定应用程序，您需要（重新）设计它以便不需要重新加载。这确实是 Ajax 的全部意义所在。我严重怀疑这对你来说是一个表演终结者。在最坏的情况下，您应该能够在用户重新加载页面时重新生成动态 div。如果您需要记住某些状态以重新生成 div，cookie 可能对您有用。

【讨论】：

【解决方案2】：

最好的办法是跟踪 div 内容服务器端。这样，每次用户更新 div 的内容时，都可以进行 AJAX 调用来更新 div 的服务器端表示。

当页面首次加载时，您的服务器可以预填充 div。然后看起来好像页面在重新加载后保留了 div 的内容。

这种类型的功能现在已在许多网站中使用，因此我确信它适用于您的场景。看看这个网站（SO）。当您投票时，您实际上是在更改浏览器上的某些内容，即投票箭头的颜色。如果您在颜色未恢复后刷新，它会以某种方式记住您已投票。那是因为当您单击投票箭头时，会进行 AJAX 调用，并且您投票的事实会记录在服务器上。

【讨论】：

【解决方案3】：

尝试使用 cookie http://plugins.jquery.com/project/cookie

【讨论】：

【解决方案4】：

要在页面加载后保留网页内容，您应该使用javascript的CacheStorage接口。

可以利用此界面使您的网站也可以离线工作。

详情请访问： https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage

【讨论】：