什么是替换 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：本地存储