HTML5 localStorage для ресурсов (таблицы стилей, JavaScript, изображения и т. д.)
-
22-09-2019 - |
Вопрос
Чтобы сэкономить время загрузки клиента и использование сети, можно ли использовать функцию localStorage HTML5 для хранения содержимого связанных таблиц стилей, файлов javascript и двоичных данных (например,изображения), а не каждый раз обращаться к серверу?
Будет ли это только усложнять ситуацию? Поскольку я предполагаю, что вам придется добавить связанный ресурс с помощью JavaScript, а не просто script
или link
элемент, разбивающий страницу для тех, у кого не включен JavaScript)?Если вы не можете проанализировать содержимое (используя HEAD
запрос на проверку даты последнего изменения и других заголовков), прежде чем браузер загрузит его.
Или лучше просто придерживаться 304 Not Modified
и eTag
заголовки?
Решение
Я думаю, в этом случае вам следует рассмотреть возможность автономного кэширования:
Вы также можете хранить введенные пользователем данные в localStorage или sessionStorage:
- https://developer.mozilla.org/en/DOM/Storage#sessionStorage
- https://developer.mozilla.org/en/DOM/Storage#localStorage
Не используйте globalStorage (не стандарт).
Я написал статью об оффлайне, см.: http://hacks.mozilla.org/2010/01/offline-web-applications/
Речь идет об офлайн-режиме, но такой механизм можно использовать для улучшения вашего веб-приложения.
Другие советы
Вы можете закодировать изображение/двоичные данные в base64 и сохранить их в виде строки в localStorage. Использование URL-адресов base64 не работает в некоторых браузерах, поэтому это не идеальное решение.
CSS и js подойдут, вы можете записать их на страницу или использовать URL-адрес base64.
Я бы не стал беспокоиться о том, что это нарушит работу сайта для пользователей, не использующих JS, поскольку JS отключен, вы все равно не сможете получить доступ к localStorage.