Récupération des données du stockage local du navigateur après l'enregistrement à l'aide de javascript

Question

Dans mon application backbone, je sauvegarde des objets dans le stockage local et je veux seulement les récupérer une fois qu'ils sont sauvegardés.

J'ai essayé d'utiliser la fonction de rappel (qui se déclenche après la fonction qui sauvegarde les données) mais il y a un peu de latence que j'ai observé et ça revient indéfini.

Cependant, lorsque je retarde l'appel de fonction (qui récupère les données) de 200 ms en utilisant setTimeout, cela fonctionne très bien.

Existe-t-il une façon élégante de le faire?

function delayed(){ 
    // this callback function retrieves the data 
    callback.call(self); 
} 

window.setTimeout(delayed, 200); 

Answer 1

Vous pouvez donc faire un emballage personnalisé à cet effet:

(function() { 
    var Store = function() { 
    }; 

    Store.prototype.set = function(key, value) { 
     localStorage.setItem(key, value); 
     return this.get(key); 
    }; 

    Store.prototype.get = function(key) { 
     return localStorage.getItem(key); 
    }; 

    var store = new Store(); 
    console.log(store.set('foo', 'bar')); 
})(); 

Fiddle

Answer 2

Vous pouvez garder un double de l'extérieur localStorage, en mémoire. Vous n'avez pas besoin de compter le timing de localStorage. Il suffit d'écrire sur localStorage souvent, et de ne charger que depuis le chargement de la page.

Juste une idée! Sans plus de précisions, il est difficile de donner une réponse plus concrète.

Answer 3

Au début, je pensais que l'utilisation du stockage événement, mais comme vous pouvez voir des this question - et this question et this demonstration à html5demos.com, l'utilisation de l'événement de stockage est destiné à suivre l'évolution de la localStorage entre windows/tabs, pas à l'intérieur du document lui-même.

Mais vous pouvez créer votre propre événement, le tir lorsque setItem est appelé par setItem remplaçant:

//create an "onstoragechange" custom event 
var storageEvent = document.createEvent('Event'); 
storageEvent.initEvent('onstoragechanged', true, true); 

document.addEventListener('onstoragechanged', function (e) { 
    alert('value added to localstorage'); 
    //or 
    alert(localStorage.getItem('test')); 
    //call the code here, as you above would do after setTimeout 
    //"callback.call(self);" or whatever 
}, false); 

//override localStorage.setItem 
var oldSetItem = Storage.prototype.setItem; 
Storage.prototype.setItem = function() { 
    oldSetItem.apply(this, arguments); 
    document.dispatchEvent(storageEvent); 
} 

//test 
localStorage.setItem('test', 'value'); 

demo/jsFiddle: http://jsfiddle.net/cYLHT/

Maintenant vous avez un événement qui est envoyé chaque fois que vous enregistrez quoi que ce soit à localStorage, et la valeur écrite est réellement présente. Développez ceci avec des événements qui aident votre application - comme un événement spécial si une clé importante est mise à jour/stockée. Ce qui précède semble peut-être être une réponse «hors sujet», ou excessive, mais je pense que c'est une bien meilleure approche que de propager setTimeouts autour du code.