localStorage также можно использовать так

внешний интерфейс открытый источник JavaScript продукт
localStorage также можно использовать так

Появление веб-хранилища в HTML5 в основном должно компенсировать отсутствие использования файлов cookie в качестве локального хранилища. Объем данных, хранящихся в файле cookie, очень мал, и данные будут автоматически перенесены в заголовок запроса, но сервер может не заботиться о данных, что приведет к пустой трате полосы пропускания.

Web Storage предоставляет два объекта хранилища: localStorage и sessionStorage.

Данные, хранящиеся в sessionStorage, полезны только для этого сеанса, они автоматически истекают после завершения сеанса, и данные действительны только в текущем окне, а новые окна в том же источнике не могут получить доступ к другим окнам на основе
Данные, хранящиеся в sessionStorage. Также благодаря этим характеристикам сценариев использования sessionStorage будет меньше.

localStorage может храниться постоянно, а данные могут совместно использоваться несколькими окнами в одном и том же источнике. Выглядит красиво, но у localStorage тоже есть недостатки, у большинства браузеров ограничение на размер 5M. Но этого недостаточно, чтобы стать препятствием для всех использовать localStorage.Вы должны знать, что файлы cookie имеют размер всего 4K, что более чем в тысячу раз больше.Удачи.

Базовое использование localStorage

В интернете слишком много статей об этом контенте, и говорить об этом сейчас немного старомодно. Я не буду делать здесь больше введения, читатели, которые не понимают, могут прочитатьздесь.

Следует отметить два момента. существуетsetItemможет быть достигнут предел размера, лучше добавить отлов ошибок1:

try {  
  localStorage.setItem(key, value);
} catch(e) {
  if (isQuotaExceeded(e)) {
    // Storage full, maybe notify user or do some clean-up
  }
}

function isQuotaExceeded(e) {  
  var quotaExceeded = false;
  if (e) {
    if (e.code) {
      switch (e.code) {
        case 22:
          quotaExceeded = true;
          break;
        case 1014:
          // Firefox
          if (e.name === 'NS_ERROR_DOM_QUOTA_REACHED') {
            quotaExceeded = true;
          }
          break;
      }
    } else if (e.number === -2147024882) {
      // Internet Explorer 8
      quotaExceeded = true;
    }
  }
  return quotaExceeded;
}

Кроме того, когда емкость хранилища почти заполнена, это вызоветgetItemРезкое падение производительности2.

Давайте взглянем на использование localStorage для мозгового штурма.

Кэшировать статические файлы

Вы не можете не спросить, а разве HTTP-протокол не поддерживает кеширование файлов изначально (я писал статью раньше)Руководство HTTP по веб-кэшированию), зачем использовать localStorage для кэширования? Чтобы быть программируемым, с точки зрения непрофессионала, это означает держать судьбу в своих руках.

Кэш протокола HTTP может быть очищен или отключен браузером пользователя, либо время истечения срока действия может быть установлено веб-сервером или не кэшировано. Для front-end инженеров это скорее черный ящик, и он кажется немного бессильным решить, обращаться ли к кешу или к удаленному файлу.

Существует два способа управления кэшированием файлов с помощью localStorage:

  1. Загрузить статические файлы с помощью загрузчика
  2. Встроенные статические файлы на стороне сервера

В этих двух методах стратегия истечения срока действия кэша обычно подготавливается заранее, обычно контролируется номером версии, который будет подробно рассмотрен ниже. В противном случае будет запущена новая версия файла, а пользовательский клиент по-прежнему будет старой версии, что вызовет массу неприятностей, а такие проблемы невозможно легко отладить или воспроизвести.

Загрузить статические файлы с помощью загрузчика

Поскольку запросы отправляются динамически, запросы могут быть перехвачены и обработаны. Общий процесс выглядит следующим образом:

  1. Проверьте, кэшируется ли запрошенный URL-адрес файла в localStorage.
    1. Если нет, перейдите к шагу 2
    2. Если да, определите, устарел ли файл или совпадает ли номер версии
      1. Просрочено или не соответствует, перейдите к шагу 2
      2. Содержимое файла допустимо, перейдите к шагу 4
  2. запросить удаленный файл
  3. Кэшировать последнее содержимое файла
  4. Выполнить содержимое файла

Для этого подхода существует библиотека с открытым исходным кодом:basket.js.

Встроенные статические файлы на стороне сервера

Этот метод на шаг дальше предыдущего: в первом ответе файлы, которые нужно поместить в localStorage, встраиваются в html, и каждый последующий ответ будет отображать кусок кода для загрузки файла из localStorage до тех пор, пока версия файла не меняется. Преимущество этого в том, что он может эффективно сократить количество запросов даже в первый раз.

Номер версии не совпадает (номер версии может быть записан в куки, а при первом посещении номера версии нет), содержание ответа сервера:

<script>  
function script2ls(id) {  
  var script = document.getElementById(id);
  if (script) {
    localStorage[id] = script.innerHTML;
  }
}
</script>

<script id="jquery.js">...jquery source code...</script>  
<script>script2ls('jquery.js')</script>

Если номер версии совпадает, сервер отвечает:

<script>  
function ls2script(id) {  
  var script = document.createElement('script');
  script.text = localStorage[id];
  document.head.appendChild(script);
}
</script>

<script>ls2script('jquery.js')</script>

Однако использование localStorage для кэширования файлов сопряжено с риском XSS, и ущерб может быть необратимым.3.

Гомологическая оконная коммуникация

Возможно, вам придется спросить еще раз, разве нет postMessage ? Да, postMessage действительно можно использовать для связи между окнами или iframe, но предпосылка заключается в том, что вы должны получить объект дескриптора, чтобы открыть новое окно или iframe:

var popup = window.open(...popup details...);  
popup.postMessage("hello there!", "http://example.com");

Таким образом, если вы открываете новое окно в новом окне, кажется, что передать сообщение непросто.

Вы также можете спросить, зачем общаться между окнами? Хороший вопрос, технологии без сценариев применения хулиганят. Как и некоторые компоненты, совместно используемые несколькими окнами, и существуют высокие требования к синхронизации данных в реальном времени, это будет сценарий применения этой технологии. Например, количество непрочитанных сообщений в центре уведомлений, два окна, окно A обновляется до 8, а переключение на окно B по-прежнему равно 9, что приводит к непоследовательному восприятию, этот пример все еще может быть безобидным; другой пример корзина, два окна продукта, добавить окно A в корзину, переключиться на окно B, чтобы добавить в корзину, и обнаружить, что продукт A не добавлен, что более серьезно. Конечно, это тоже можно обновить, установив соединение с фоном для каждого окна, но если пользователь открывает более десятка окон, накладные расходы будут большими.

При той же связи с исходным окном у нас может быть только одно окно для установления соединения с фоном, и после получения обновления мы можем транслировать его на другие окна. Сказав так много, каков принцип реализации?

storage event

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

  • Управляйте уникальным идентификатором каждого окна
  • предотвратить дублирование сообщений
  • Предотвратить отправку сообщений в окна, которым все равно
  • сердцебиение окна
  • Выбор главного окна
  • ...

Не волнуйтесь, есть хорошие реализации с открытым исходным кодом:diy/intercom.js,tejacques/crosstab

разное

Носитель данных в качестве интерфейсной БД

Вас может не устраивать хранение данных в парах ключ-значение, вы также хотите хранить более сложные структуры данных.

Гибкий доступ к данным в формате json:typicode/lowdb

CURD операция над данными через sql:agershun/alasql

Автоматическое сохранение формы

При заполнении формы, если браузер дает сбой или неправильная работа приводит к потере заполненного контента, сердце пользователя в этот момент тоже должно быть разбито. Неправильная работа также может добавитьbeforeunloadсобытие, чтобы предупредить пользователя перед закрытием браузера или выходом из текущей страницы. Что касается сбоя браузера, сохранение изменений данных в фоновом режиме в режиме реального времени кажется большим накладным расходом, и сохранение в localStorage в реальном времени является хорошим решением.Кстати, есть также реализация с открытым исходным кодом:simsalabim/sisyphus

Суммировать

Кэширование файлов теперь имеет лучшее решение, да, это Service Worker.CacheStorage.

Тем не менее, если вы узнаете больше о некоторых открывающих мозг идеях, это поможет расширить представление о решении проблем.

Наслаждайтесь открытым исходным кодом ❤️

Ссылаться на:
1:Always catch LocalStorage security and quota exceeded errors
2:Measuring localStorage Performance
3:Повысьте безопасность кода localStorage с помощью SRI

Категории