Gestion du cache avec sessionStorage, et les metas cachecontrol
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:
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:
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 ?
