代码之家 › 专栏 › 技术社区 › Vivek Nuna Chetan sabhaya

什么是替换ajax调用以脱机模式加载html页面?

html javascript

Vivek Nuna Chetan sabhaya · 技术社区 · 6 年前

我正在通过下面的代码导航到一个HTML页面。此代码在联机模式下(当我有internet时)工作正常,但在没有网络连接时在脱机模式下不工作。

<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>

1 回复 | 直到 6 年前

alexc 6 年前

你试过把它存储在本地存储吗?基本上,每当你得到调用那个端点的时候,你就把它保存在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