Charger la page avec le code HTML du stockage Web

Question

Je suis en train de tester un concept pour une application utilisant le stockage local et j'ai besoin de connaître la meilleure façon de charger le contenu après l'avoir stocké. Essentiellement, l'application prélèvera le contenu, le stockera localement et le serveur dans une nouvelle page sur demande. J'ai besoin que les utilisateurs puissent cliquer sur un lien (mysite.com/article1.html) et au lieu que le navigateur fasse la demande HTTP pour la page, il suffit de charger le HTML qui a été stocké localement.

Alors, comment charger la valeur "localNews" au lieu de faire un HTTP pour la même page?

var storeUrl; 
var localNews; 

$('a').click(function() { 
event.preventDefault(); 
storeUrl = $(this).attr('href'); 
$.ajax({ 
    url: storeUrl, 
    cache: true, 
    crossDomain: true 
}).done(function(html) { 
    localNews = html; 
    console.log(localNews); 
    localStorage.setItem('storeUrl', 'localNews'); 
}); 
}); 

Answer 1

var storeUrl; 
    var localNews; 

    $('a').click(function(event) { 
     event.preventDefault(); 
     storeUrl = $(this).attr('href'); 
     if (localStorage.getItem(storeUrl)) { 
      //load local 
     } else { 
      $.ajax({ 
       url: storeUrl, 
       cache: true, 
       crossDomain: true 
      }).done(function(html) { 
       localNews = html; 
       console.log(localNews); 
       localStorage.setItem(storeUrl, localNews); 
      }); 
     } 
    }); 

Answer 2

Donc, fondamentalement, vous voulez charger un fichier local via Ajax? Peut être fait, mais il suffit de faire quelques petits ajustements à votre appel Ajax. Donc changer ceci:

$.ajax({ 
    url: storeUrl, 
    cache: true, 
    crossDomain: true 

à ceci:

$.ajax({ 
    url: storeUrl, 
    cache: true, 
    crossDomain: true, 
    async: false, 
    dataType: 'html', 
    contentType: 'text/html;charset=utf-8' 

Notez le async et datatype et contentType. Cela fait un moment que je l'ai codé, mais je crois que le paramètre clé est async mais les datatype et contentType sont également nécessaires.