Utilisation du localStorage, test avec 1000 lignes.

Vitesse écriture / lecture : TOP
le facteur limitant : transfert du gros json : 1.9Mo en 3.2s
c'est la que le localStorage est TOP

js/gamutable.es6.js

@@ -106,6 +106,7 @@ let monTableau = {
 			triProps: [],
 			selectTr: [],
 			champ_search: 'html',
+			chargement: true,
 		};
 	},
 	mounted() {
@@ -145,10 +146,24 @@ let monTableau = {
 			let url = this.apiuri;
 			if (parseInt(id) > 0) {
 				url += '&id=' + id;
+			} else {
+				let data = localStorage.getItem('gamuTable');
+				data = recupJson(data);
+				if (data) {
+					let config = data.shift();
+					this.header = config.header;
+					this.crayons = config.crayons;
+					this.table = data;
+					if (data[0].search) {
+						this.champ_search = 'search';
+					}
+					console.log('fin chargement localStorage');
+				}
 			}
 			fetch(url)
 				.then((response) => response.json())
 				.then((data) => {
+					localStorage.setItem('gamuTable', JSON.stringify(data));
 					let config = data.shift();
 					this.header = config.header;
 					this.crayons = config.crayons;
@@ -161,7 +176,8 @@ let monTableau = {
 							this.champ_search = 'search';
 						}
 					}
-					Vue.nextTick(function () {
+					Vue.nextTick(() => {
+						this.chargement = false;
 						console.timeEnd('Chargement de VueJs APRES Ajax');
 					});
 				})
@@ -228,6 +244,14 @@ let monTableau = {
 			</select>
 			<input class="gamutable--rechercher" type="text" v-model="search" placeholder="Rechercher">
 			<button class="btn gamutable--resetOrderBy" type="button" @click.stop="resetTri()">Réinitialiser les tris des colonnes</button>
+			<span v-show="chargement" class="rouge">
+				<i class="fa fa-refresh fa-spin fa-2x fa-fw rouge"></i>
+				Mise à jour de la base de donnée
+			</span>
+			<span v-show="!chargement" class="verte">
+				<i class="fa fa-check"></i>
+				Base de données synchronisée
+			</span>
 		</div>
 		<table class="table table--zebra">
 			<thead>

js/gamutable.js

@@ -121,7 +121,8 @@ var monTableau = {
       triOrders: [],
       triProps: [],
       selectTr: [],
-      champ_search: 'html'
+      champ_search: 'html',
+      chargement: true
     };
   },
   mounted: function mounted() {
@@ -160,11 +161,28 @@ var monTableau = {
 
       if (parseInt(id) > 0) {
         url += '&id=' + id;
+      } else {
+        var data = localStorage.getItem('gamuTable');
+        data = recupJson(data);
+
+        if (data) {
+          var config = data.shift();
+          this.header = config.header;
+          this.crayons = config.crayons;
+          this.table = data;
+
+          if (data[0].search) {
+            this.champ_search = 'search';
+          }
+
+          console.log('fin chargement localStorage');
+        }
       }
 
       fetch(url).then(function (response) {
         return response.json();
       }).then(function (data) {
+        localStorage.setItem('gamuTable', JSON.stringify(data));
         var config = data.shift();
         _this2.header = config.header;
         _this2.crayons = config.crayons;
@@ -184,6 +202,7 @@ var monTableau = {
         }
 
         Vue.nextTick(function () {
+          _this2.chargement = false;
           console.timeEnd('Chargement de VueJs APRES Ajax');
         });
       }).catch(function (error) {
@@ -248,7 +267,7 @@ var monTableau = {
       }
     }
   },
-  template: "\n\t<div class=\"gamutable\">\n\t\t<div class=\"gamutable--surTable\">\n\t\t\t<select id=\"parPage\" v-model=\"parPageSelect\">\n\t\t\t\t<option v-for=\"v in tparpage\" :key=\"v\">{{v}}</option>\n\t\t\t</select>\n\t\t\t<input class=\"gamutable--rechercher\" type=\"text\" v-model=\"search\" placeholder=\"Rechercher\">\n\t\t\t<button class=\"btn gamutable--resetOrderBy\" type=\"button\" @click.stop=\"resetTri()\">R\xE9initialiser les tris des colonnes</button>\n\t\t</div>\n\t\t<table class=\"table table--zebra\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t<th v-for=\"(label,head,i) in header\" :key=\"'head_'+i\" :class=\"head\">\n\t\t\t\t\t\t<span v-html=\"label\"></span>\n\t\t\t\t\t\t<span class=\"iconeTri\">\n\t\t\t\t\t\t\t<i class=\"fa fa-sort-asc\" :class=\"ordreActif(head, 'asc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'asc')\"></i>\n\t\t\t\t\t\t\t<i class=\"fa fa-sort-desc\":class=\"ordreActif(head, 'desc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'desc')\" ></i>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</th>\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t<tr v-for=\"l in tableau\" :key=\"l.html.id\" :class=\"selectTr.indexOf(l.html.id) !== -1 ? 'select' : ''\" >\n\t\t\t\t\t<td v-for=\"(td,name, i) in l.html\" :key=\"'td_'+i\" :class=\"[afficher_crayons(name,l.html.id), name]\" v-html=\"td\" @click=\"selectLigne(l.html.id,name)\">\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</tbody>\n\t\t</table>\n\t\t<div class=\"gamutable--sousTable\">\n\t\t\t<div class=\"gamutable-nbrMax\">{{table.length}} \xE9l\xE9ments</div>\n\t\t\t<div class=\"gamutable--pagination\">\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page=1\"> Start </button>\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page--\"> Previous </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-for=\"pageNumber in pages.slice(page-1, page+5)\" @click=\"page = pageNumber\"> {{pageNumber}} </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" @click=\"page++\" v-if=\"page < pages.length\" class=\"page-link\"> Next </button>\n\t\t\t\t\t<button type=\"button\" @click=\"page=pages.length\" v-if=\"page < pages.length\" class=\"page-link\"> Last </button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>"
+  template: "\n\t<div class=\"gamutable\">\n\t\t<div class=\"gamutable--surTable\">\n\t\t\t<select id=\"parPage\" v-model=\"parPageSelect\">\n\t\t\t\t<option v-for=\"v in tparpage\" :key=\"v\">{{v}}</option>\n\t\t\t</select>\n\t\t\t<input class=\"gamutable--rechercher\" type=\"text\" v-model=\"search\" placeholder=\"Rechercher\">\n\t\t\t<button class=\"btn gamutable--resetOrderBy\" type=\"button\" @click.stop=\"resetTri()\">R\xE9initialiser les tris des colonnes</button>\n\t\t\t<span v-show=\"chargement\" class=\"rouge\">\n\t\t\t\t<i class=\"fa fa-refresh fa-spin fa-2x fa-fw rouge\"></i>\n\t\t\t\tMise \xE0 jour de la base de donn\xE9e\n\t\t\t</span>\n\t\t\t<span v-show=\"!chargement\" class=\"verte\">\n\t\t\t\t<i class=\"fa fa-check\"></i>\n\t\t\t\tBase de donn\xE9es synchronis\xE9e\n\t\t\t</span>\n\t\t</div>\n\t\t<table class=\"table table--zebra\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t<th v-for=\"(label,head,i) in header\" :key=\"'head_'+i\" :class=\"head\">\n\t\t\t\t\t\t<span v-html=\"label\"></span>\n\t\t\t\t\t\t<span class=\"iconeTri\">\n\t\t\t\t\t\t\t<i class=\"fa fa-sort-asc\" :class=\"ordreActif(head, 'asc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'asc')\"></i>\n\t\t\t\t\t\t\t<i class=\"fa fa-sort-desc\":class=\"ordreActif(head, 'desc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'desc')\" ></i>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</th>\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t<tr v-for=\"l in tableau\" :key=\"l.html.id\" :class=\"selectTr.indexOf(l.html.id) !== -1 ? 'select' : ''\" >\n\t\t\t\t\t<td v-for=\"(td,name, i) in l.html\" :key=\"'td_'+i\" :class=\"[afficher_crayons(name,l.html.id), name]\" v-html=\"td\" @click=\"selectLigne(l.html.id,name)\">\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</tbody>\n\t\t</table>\n\t\t<div class=\"gamutable--sousTable\">\n\t\t\t<div class=\"gamutable-nbrMax\">{{table.length}} \xE9l\xE9ments</div>\n\t\t\t<div class=\"gamutable--pagination\">\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page=1\"> Start </button>\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page--\"> Previous </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-for=\"pageNumber in pages.slice(page-1, page+5)\" @click=\"page = pageNumber\"> {{pageNumber}} </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" @click=\"page++\" v-if=\"page < pages.length\" class=\"page-link\"> Next </button>\n\t\t\t\t\t<button type=\"button\" @click=\"page=pages.length\" v-if=\"page < pages.length\" class=\"page-link\"> Last </button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>"
 };
 var app = new Vue({
   el: '#app',