javascript - 什么是替代 ajax 调用以在离线模式下加载 html 页面？

Question

我正在通过以下代码导航到 HTML 页面。此代码在在线模式下工作正常(当我有互联网时)，但在没有网络连接时它在离线模式下不起作用。

<script>
    $(document).ready(function () {
        var homeUrl = "./js/app/views/abc.html";
        $.ajax({
            url: homeUrl, success: function (result) {
                $('#myapp').html(result);
            }
        });
    });
</script>

我想通过下面的代码来修复它，但我不认为它是好的解决方案，因为我需要将整个 HTML 内容写成一个字符串，所以这很容易出错，复杂并且不能轻易地为多个页。有没有更好的方法。

<script>
    $(document).ready(function () {
        var result = "Whole html content of abc.html";
        $('#myapp').html(result);
    });
</script>

Answer 1

您是否尝试过将其存储在 localStorage 中？基本上，无论何时调用该端点，都会将其结果保存在 localStorage 中。

然后，当您的浏览器处于离线状态并且您的服务器调用返回错误时，您可以从 localStorage 中获取存储的结果并使用它呈现页面。

var homeUrl = "./js/app/views/abc.html";
var cacheKey = 'myUniqueCacheKey';
$.ajax({
  url: homeUrl,
  success: function (result) {
    localStorage.setItem(cacheKey, String(result));
    $('#myapp').html(result);
  },
  error: function (err) {
    var htmlString = localStorage.getItem(cacheKey);

    if (err.condition && htmlString) {
      $('#myapp').html(htmlString);
    } else {
      // do your normal error handling here
    }
  }
});

MDN:localStorage