Gestion du cache avec sessionStorage, et les metas cachecontrol

**4urelien.jo** · 03/06/2015, 10h33

Bonjour,

J'ai créé une application web qui permet de naviguer dans une arborescence grâce à des requêtes AJAX.
Pour rendre la navigation plus rapide et pouvoir naviguer hors connexion j'ai mis au point un script qui utilise l'outil sessionStorage.
Je verifie manuellement si l'objet que je veux est en cache et si ce n'est pas le cas je fais ma requête.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
tst = window.sessionStorage.getItem(objectId.toString()) 
if (!tst) {	
	console.log("No cache defined");									//If we don't have the object in cache 
	$.getJSON('/ws?function=objectNavigation', {"parent" : objectId,"display":"children"})//the request is done
        .done(function(data){
		jsondatalist = JSON.stringify(data.listobject);
		output = displayNodes(JSON.parse(jsondatalist));		
		document.getElementById("zone").innerHTML = output;				
	})
	.fail(function(jqxhr, textStatus, error) {
		var err = textStatus + ", " + error;
		console.log("Request Failed: " + err);
	})
} else {
	console.log("Cache used");
	output = displayObject(tst);      //else we display the object
	document.getElementById("zone").innerHTML = output;
}

Ce système est assez bancal, j'aimerai améliorer cette partie du script.
J'ai lu que des metadonnées dans le html (no-cache) permettraient que le navigateur envoie un jeton au serveur pour vérifier que le contenu est a jour.

Ensuite le navigateur fait comme pour une page html et utiliserai le résultat qu'il a déjà téléchargé.
Voici ma page html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>	
	<head>
		<meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <meta http-equiv="Cache-control" content="no-cache"/> <!-- test metadonnées -->
        <link rel="stylesheet" type="text/css" href="/static/css/index.css" />
	<title>Zones</title>
 
        <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <!-- Les sources de la bibliothèque JQuery -->
        <script type="text/javascript" src="/static/js/headnav.js"></script>  
        <script type="text/javascript" src="/static/js/zone.js"></script>	
        <script type="text/javascript" src="/static/js/valuedisplay.js"></script>   
        <script type="text/javascript" src="/static/js/flotr2.js"></script>
	</head>
	<body>
	<header>
		<button id="backbutton" onclick="history.back()"></button>
		<button id="nextbutton" onclick="history.forward()"></button>
        <button id="homebutton" onclick="document.location='/html/home.html'"></button>
	</header>
	<nav>
		<input id="nav" type="search" name="nav" placeholder="Rechercher..." onkeyup="searchDataNodes()" />
 
	</nav>
        <div id="ajax">
            <div id="zonePanel">
        	<table id="zone">
        	</table>
            </div>
        </div>
        </body>
</html>

Quelqu'un pourrait-il m'eclairer ?

**NoSmoking** · 03/06/2015, 19h22

Bonjour,

Quelqu'un pourrait-il m'eclairer ?

peut être

Comprendre le storage en HTML5.

**4urelien.jo** · 04/06/2015, 09h45

Merci NoSmoking, mais cela ne dis pas si lorsque j’exécute ma requête, le navigateur regarde dans ce dictionnaire sessionStorage pour récupérer automatiquement le résultat ? En utilisant les outils navigateurs j'ai vu qu'il refait la requête systématiquement.

Pour le contenu statique ( une page HTML par exemple ) le serveur envoie au navigateur la page avec un jeton qui identifie la fraîcheur de celle-ci. A chaque fois que la navigateur aura besoin de la re-télécharger il va envoyer le jeton au serveur pour vérifier que la page est toujours fraîche.Si c’est le cas il réutilise la page en cache.
Cette opération est configurable grace a des méta-données dans la page html et avec des configurations au niveau du serveur ( Apache pour moi ).

Je voulais savoir si il etais possible de configurer mon projet pour que le navigateur fasse pareil pour les requetes ajax, a savoir envoyer un jeton de 'fraicheur' et recuperer automatiquement le resultat en cache si le contenu est frais

Si tu connais un pro en cache

Gestion du cache avec sessionStorage, et les metas cachecontrol

JavaScript

Discussions similaires

Partager

Partager