web-dev-qa-db-fra.com

window.localStorage vs chrome.storage.local

Je suis en train de développer une extension Chrome et j'ai besoin de stocker des données, puis de les récupérer à un moment donné. J'ai fait des recherches sur disponible storages et est tombé sur les suivants: window.localStorage et chrome.storage.local.

Donc ma question est, laquelle est le bon choix à utiliser dans les extensions Chrome:
window.localStorage ou chrome.storage.local?

P.S. J'utilise browser action pour charger un HTML local dans IFRAME. Je n'utilise donc pas popup.js.

javascriptgoogle-chrome-extensionlocal-storagegoogle-chrome-storage
38
Karlen Kishmiryan

Cela dépend entièrement de ce que votre extension Chrome fera. Window.localStorage est un stockage HTML5. À moins que vous ne l'exécutiez dans la page d'arrière-plan, il ne peut que vous permettre d'obtenir et de définir des données dans stockage pour un domaine spécifique. Cela est également vrai pour le code injecté dans le DOM, car il utiliserait le localStorage sur la page Web.

En d'autres termes, vous ne pourrez pas partager de données sur différentes pages Web à moins que vous n'utilisiez localStorage dans la page d'arrière-plan, qui fonctionne indépendamment des pages Web, car elle a un chrome: // URI comme domaine.

chrome.storage.local, d'autre part, est conçu pour Chrome Extensions et Chrome Apps pour stocker des données dans un emplacement plus central. Comme ce n'est pas le cas) t accessible aux pages Web normales, chaque extension dispose de son propre stockage. Une possibilité est que votre page d'arrière-plan gère le paramétrage et l'obtention des données, tandis que vos scripts de contenu traitent de la modification et de l'interaction avec la page Web.

Cependant, ces API fonctionnent également dans les scripts de contenu, et les deux extensions que j'ai écrites utilisent chrome.storage.local appelé à partir des scripts de contenu.

Par exemple, j'ai construit une application Stack qui préserve les éléments de la boîte de réception dans Stack Exchange jusqu'à ce que vous les ayez réellement lus, appelée StackInbox . Étant donné que les sites Stack Exchange s'étendent sur des centaines de domaines, j'ai choisi chrome.storage.local car je pouvais enregistrer l'ID de compte de l'utilisateur et le réutiliser sur tous les sites, en veillant à ce que les données de la boîte de réception soient synchronisées, tout en l'utilisant directement dans le script de contenu.

Comme test simple, placez des données dans localStorage sur un domaine, dans un script de contenu, et essayez de les extraire d'un autre, et vous verrez que les données ne seront pas là. Avec chrome.storage.local, ce n'est pas un problème.

Enfin, Chrome Extensions et Chrome Apps sont sur liste blanche, car l'utilisateur a choisi de l'installer, donc ils peuvent généralement faire plus de choses qu'un site Web normal. Par exemple , en spécifiant l'autorisation "unlimitedStorage" dans votre manifeste, vous pouvez stocker des données bien au-delà de la limite de 5 Mo placée sur HTML5 localStorage.

Pour plus d'informations, consultez documentation de Google sur Chrome Storage .

43
jmort253

localStorage

Avantages:

  • Synchrone et donc plus facile à travailler avec: var value = localStorage[key]
  • A un support dans Dev Tools: Ressources> Local Storage pour afficher et modifier.

Inconvénients:

  • Ne stocke que des chaînes, vous devez donc sérialiser les données vous-même, c'est-à-dire avec JSON.stringify
  • N'est pas accessible à partir des scripts de contenu (ou plutôt, les scripts de contexte la partagent avec la page et non avec l'extension), vous devez donc compter sur la messagerie pour leur transmettre des valeurs.
  • Synchrone ET partagé entre les pages d'extension à exécution simultanée, ce qui peut entraîner des problèmes de synchronisation.

chrome.storage.local

Avantages:

  • Sérialise automatiquement les données compatibles JSON, peut stocker des non-chaînes sans passe-partout supplémentaire.
  • Entièrement disponible dans les scripts de contenu.
  • Prend en charge les événements qui notifient les changements: chrome.storage.onChanged
  • Avec l'autorisation "unlimitedStorage", Peut contenir de grandes quantités de données arbitraires.

  • A un mécanisme intégré Nice pour les valeurs par défaut:

    chrome.storage.local.get({key: defaultValue}, function(value){/*...*/});
  • Entièrement pris en charge dans Firefox WebExtensions et Edge Extensions.

Inconvénients:

  • Asynchrone, donc un peu plus difficile à travailler avec:

    chrome.storage.local.get("key", function(value){/* Continue here */});
  • Non visualisé dans Dev Tools; il faut appeler chrome.storage.local.get(null) pour obtenir toutes les valeurs ou utiliser quelque chose comme Storage Area Explorer .

chrome.storage.sync

Comme ci-dessus, mais:

Avantages:

  • Synchronisé automatiquement entre les instances connectées Chrome instances, si la synchronisation des extensions est activée.

Inconvénients:

  • quotas inflexibles sur la taille des données et la fréquence de mise à jour.

  • Au 06/11/2016, pas encore pris en charge dans les extensions Web Firefox ou les extensions Edge, donc non portables.

    Remarque: storage.sync Est désormais compatible avec FF WebExtension , bien qu'il n'y ait aucun moyen de faire Chrome et FF se synchroniser nativement entre eux.

59
Xan