Bonjour,


J'essaye d'utiliser localStorage pour partager des données entre plusieurs onglets.

Sur chaque onglets, j'affiche le contenu du localStorage: console.log(localStorage);.
Pour éviter des mauvaises surprises, j'affiche aussi les modifications sur le storage avec un Script placé en début de mon fichier :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
window.addEventListener('storage',function(e){
            console.log("MODIFIED !!!!!!!!"); 
            console.log(e);
});
Je modifie un élément du localStorage avec la méthode suivante :
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
19
20
21
22
23
 
class CLASS {
 
   __method(method = undefined) {
 
        let name = '123456';
 
        if(method === undefined) {
            console.log('get ' + localStorage.getItem(name));
            return localStorage.getItem(name);
        }
 
        this.prevMethod = method;
 
        if(method === null) {
            console.log('remove ');
            localStorage.removeItem(name);
            return;
        }
        console.log('set ' + method);
        localStorage.setItem(name, method);
  }
};

Puis j'ouvre la même page dans plusieurs onglets, le résultat est quelque peu surprenant. Je vous mets les logs ci-dessous :
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
// onglet 1
Storage { length: 0 }
set X // j'ajoute un élément à mon localStorage
get X

// onglet 2, 3, 4, 6
get null
Storage { length: 0 }
get null

// onglet 5
get X
Storage { X: "123456", length: 1 }
get X
Ainsi, lorsque j'ouvre des onglets supplémentaires (ici 5 autres onglets), certains ont bien '123456' dans le localStorage, et d'autres non. Pourtant, c'est bien la même URL, et le localStorage n'est pas modifié.

Le handler est bien appelé lorsque le localStorage est modifié, et tous les onglets sont notifiés lorsqu'il y a une modification du localStorage.


Encore plus marrant, en changeant le nom '123456' par autre chose, e.g., '456789', je vais retrouver à la fois '123456' et '45789' sur certains onglets, et pas sur d'autres. Parfois, en rajoutant un autre élément au localStorage au début de mon script, je vais le retrouver sur tous mes onglets mais toujours sans mes éléments '123456' et '45789'.
J'avais alors essayé de faire :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
let test = localStorage.getItem('x');
if( test == null)
    test = 0;
test++;
localStorage.setItem('x', test);
Et je me retrouvais avec plusieurs onglets ayant la même valeur pour x.


À noter que j'ai testé mon code sur Firefox 58 et Firefox 59, et que mon code fait aussi d'autres choses, malheureusement, je ne peux pas en dévoiler le contenu (restrictions de mon employeur), et il m'est ainsi très difficile de vous présenter un code minimal reproduisant l'erreur.


Mais j'ai comme l'impression que Firefox fait des "caches" des pages, faisant que je me retrouve avec un version de localStorage 'normale', ainsi qu'une version 'en cache'.


Je pense pouvoir me dépatouiller en modifiant une variable bâteau de localStorage à l'ouverture de l'onglet, puis, avec les onglets ayant reçu l'event de modification de la variable bâteau, modifier la variable qui m'intéresse pour forcer sa mise à jour.

Mais c'est quelque peu sale, et j'aimerais surtout savoir ce qu'il se passe actuellement avec mon code.



Qu'en pensez-vous ?



En vous remerciant d'avance pour votre aide,