window.localStorage vs chrome.storage.local

Question

Я разрабатываю расширение Chrome, и мне нужно сохранить некоторые данные, а затем получить их в какой-то момент. Я сделал расследование по доступным storage и наткнулся на следующие: window.localStorage а также chrome.storage.local,

Итак, мой вопрос, какой из них является правильным выбором для использования в расширениях Chrome:
window.localStorage или же chrome.storage.local?

PS я пользуюсь browser action загрузить местный HTML в IFRAME, Так что я не использую popup.js,

Answer 1

Это полностью зависит от того, что будет делать ваше расширение Chrome. window.localStorage - это хранилище HTML5. Если вы не запускаете его на фоновой странице, он может позволить вам только получать и размещать данные в хранилище для определенного домена. Это также верно для кода, внедренного в DOM, так как он будет использовать localStorage на веб-странице.

Другими словами, вы не сможете обмениваться данными между различными веб-страницами, если не используете localStorage на фоновой странице, которая работает независимо от веб-страниц, поскольку в качестве домена используется URI chrome: //.

chrome.storage.local, с другой стороны, предназначен для расширений Chrome и приложений Chrome для хранения данных в более централизованном месте. Поскольку это не доступно для обычных веб-страниц, каждое расширение получает свое собственное хранилище. Одна из возможностей для вашей фоновой страницы - справиться с настройкой и получением данных, в то время как ваши скрипты контента имеют дело с изменением и взаимодействием с веб-страницей.

Однако эти API работают и в скриптах контента, и в обоих написанных мною расширениях используется chrome.storage.local, вызываемый из скриптов контента.

В качестве примера я создал приложение Stack, которое сохраняет элементы входящих в Stack Exchange до тех пор, пока вы на самом деле их не прочитаете, - StackInbox. Так как сайты Stack Exchange охватывают сотни доменов, я выбрал chrome.storage.local, потому что я мог сохранить идентификатор учетной записи пользователя и использовать его на всех сайтах, обеспечивая синхронизацию данных входящих сообщений, используя это непосредственно в скрипте содержимого.

В качестве простого теста поместите некоторые данные в localStorage в одном домене в сценарии содержимого и попытайтесь извлечь их из другого, и вы увидите, что данных там не будет. С chrome.storage.local это не проблема.

Наконец, Chrome Extensions и Chrome Apps включены в белый список, так как пользователь решил установить его, поэтому он, как правило, может делать больше вещей, чем обычный веб-сайт. Например, указав в своем манифесте разрешение "unlimitedStorage", вы можете хранить данные намного выше предела 5 МБ, установленного для HTML5 localStorage.

Для получения дополнительной информации см . Документацию Google по Chrome Storage.

Answer 2

localStorage

Плюсы:

• Синхронный, и, следовательно, легче работать с: var value = localStorage[key]
• Имеет поддержку в Dev Tools: Ресурсы> Локальное хранилище для просмотра и изменения.

Минусы:

• Хранит только строки, поэтому вам нужно сериализовать данные самостоятельно, т.е. JSON.stringify
• Недоступен из скриптов содержимого (точнее, контекстные скрипты делят его со страницей, а не с расширением), поэтому вам нужно полагаться на Messaging, чтобы передавать им значения.
• Синхронное И разделяется между одновременно выполняющимися страницами расширения, что приводит к возможным проблемам синхронизации.

chrome.storage.local

Плюсы:

• Автоматически сериализует JSON-совместимые данные, может хранить нестандартные данные без дополнительных шаблонов.
• Полностью доступны в контентных скриптах.
• Поддерживает события, которые уведомляют об изменениях: chrome.storage.onChanged
• С "unlimitedStorage" разрешение, может содержать произвольно большие объемы данных.

• Имеет хороший встроенный механизм для значений по умолчанию:

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

• Полностью поддерживается в Firefox WebExtensions и Edge Extensions.

Минусы:

• Асинхронный, поэтому немного сложнее работать с:

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

• Не визуализируется в Dev Tools; нужно позвонить chrome.storage.local.get(null) чтобы получить все значения или использовать что-то вроде Storage Area Explorer.

chrome.storage.sync

То же, что и выше, но:

Плюсы:

• Автоматически синхронизируется между зарегистрированными экземплярами Chrome, если включена синхронизация расширений.

Минусы:

• Негибкие квоты на размер данных и частоту обновления.

• По состоянию на 2016-11-06 г. пока не поддерживается ни в Firefox WebExtensions или Edge Extensions, поэтому не переносимые.

  Замечания: storage.sync теперь совместим с FF WebExtension, хотя нет никакой возможности сделать Chrome и FF изначально синхронизированными между собой.