Window.localStorage vs chrome.storage.local

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

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

P.S. Я использую browser action для загрузки локального HTML в IFRAME. Поэтому я не использую popup.js.

Ответ 1

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

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

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

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

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

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

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

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

Ответ 2

`localStorage`

Плюсы:

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

Минусы:

JSON.stringify только строки, поэтому вам нужно сериализовать данные самостоятельно, то есть с помощью 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) чтобы получить все значения или использовать что-то вроде проводника области хранения.

`chrome.storage.sync`

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

Плюсы:

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

Минусы:

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

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