remove onchanged localstorage how extensions extension example developer create chrome addlistener javascript google-chrome-extension local-storage google-chrome-storage

javascript - onchanged - window.localStorage vs chrome.storage.local



chrome storage sync remove (2)

localStorage

Pros:

  • Sincrónico, y por lo tanto más fácil de trabajar con: var value = localStorage[key]
  • Tiene soporte en Herramientas de desarrollo: Recursos> Almacenamiento local para ver y modificar.

Contras:

  • Solo almacena cadenas, por lo tanto, necesita serializar datos usted mismo, es decir, con JSON.stringify
  • No es accesible desde los scripts de contenido (o más bien, los scripts de contexto lo comparten con la página y no con la extensión), por lo que debe confiar en Messaging para pasarle valores.
  • Sincrónico Y compartido entre las páginas de extensión que se ejecutan simultáneamente, lo que conduce a posibles problemas de sincronización.

chrome.storage.local

Pros:

  • Automáticamente serializa datos compatibles con JSON, puede almacenar cadenas sin ningún texto adicional.
  • Totalmente disponible dentro de las secuencias de comandos de contenido.
  • Admite eventos que notifican cambios: chrome.storage.onChanged
  • Con el permiso "unlimitedStorage" , puede contener arbitrariamente grandes cantidades de datos.

  • Tiene un buen mecanismo incorporado para valores predeterminados:

    chrome.storage.local.get({key: defaultValue}, function(value){/*...*/});

  • Completamente compatible con Firefox WebExtensions y Edge Extensions.

Contras:

  • Asíncrono, por lo tanto, es un poco más difícil trabajar con él:

    chrome.storage.local.get("key", function(value){/* Continue here */});

  • No se visualiza en Dev Tools; uno necesita llamar a chrome.storage.local.get(null) para obtener todos los valores o usar algo como Storage Area Explorer .

chrome.storage.sync

Igual que arriba, pero:

Pros:

  • Sincronización automática entre las instancias de Chrome iniciadas, si la sincronización de extensiones está habilitada.

Contras:

  • Cuotas inflexibles sobre el tamaño de los datos y la frecuencia de actualización.

  • A partir del 2016-11-06, aún no es compatible con Firefox WebExtensions o extensiones de borde, por lo tanto no portátil.

    Nota: storage.sync ahora es compatible con FF WebExtension , aunque no hay forma de hacer que Chrome y FF se sincronicen de forma nativa entre sí.

Estoy desarrollando una extensión de Chrome y necesito almacenar algunos datos y luego obtenerlos en algún punto. Investigué sobre los storage disponibles y encontré los siguientes: window.localStorage y chrome.storage.local .

Entonces mi pregunta es, ¿cuál es la mejor opción para usar en las extensiones de Chrome?
window.localStorage o chrome.storage.local ?

PD Estoy usando la browser action para cargar un HTML local en IFRAME . Entonces no estoy usando popup.js .

Depende totalmente de lo que hará su extensión de Chrome. window.localStorage es almacenamiento HTML5. A menos que lo ejecute en la página de fondo, solo puede permitirle obtener y establecer datos en el almacenamiento de un dominio específico. Esto también es cierto para el código inyectado en el DOM, ya que usaría localStorage en la página web.

En otras palabras, no podrá compartir datos entre diferentes páginas web a menos que use localStorage en la página de fondo, que opera independientemente de las páginas web, ya que tiene un URI chrome: // como su dominio.

chrome.storage.local, por otro lado, está diseñado para extensiones de Chrome y aplicaciones de Chrome para almacenar datos en una ubicación más central. Como esto no es accesible para las páginas web normales, cada extensión tiene su propio almacenamiento. Una posibilidad es que su página de fondo se encargue de la configuración y obtención de los datos, mientras que los scripts de contenido se ocupan de modificar e interactuar con la página web.

Sin embargo, estas API también funcionan en las secuencias de comandos de contenido, y las dos extensiones que he escrito usan chrome.storage.local llamado desde las secuencias de comandos de contenido.

Como ejemplo, construí una aplicación Stack que conserva los elementos de la bandeja de entrada en Stack Exchange hasta que realmente los haya leído, llamado StackInbox . Como los sitios de Stack Exchange abarcan cientos de dominios, elegí chrome.storage.local porque podía guardar el accountId del usuario y volver a utilizarlo en todos los sitios, asegurándome de que los datos de la bandeja de entrada están sincronizados, al tiempo que los uso directamente en el script de contenido.

Como una simple prueba, coloque algunos datos en localStorage en un dominio, en un script de contenido, e intente extraerlo de otro, y verá que los datos no estarán allí. Con chrome.storage.local, esto no es un problema.

Por último, las extensiones de Chrome y las aplicaciones de Chrome se incluyen en la lista blanca, ya que el usuario optó por instalarlas, por lo que generalmente pueden hacer más cosas que un sitio web normal. Por ejemplo, al especificar el permiso "unlimitedStorage" en su manifiesto, puede almacenar datos mucho más allá del límite de 5 MB colocado en HTML5 localStorage.

Para obtener más información, consulte la documentación de Google en Chrome Storage .