HTML5 localStorage для ресурсов (таблицы стилей, JavaScript, изображения и т. Д.)

Question

Чтобы сэкономить как время загрузки клиента, так и использование сети, возможно ли использовать функцию localStorage HTML5 для хранения содержимого связанных таблиц стилей, файлов javascript и двоичных данных (например, изображений), вместо того, чтобы каждый раз попадать на сервер?

Не усложнит ли это что-то, поскольку я предполагаю, что вам придется добавлять связанный ресурс с помощью JavaScript, а не просто элемент script или link, ломая страницу для тех, у кого не включен JavaScript)?Если вы не можете проанализировать содержимое (используя HEAD запрошенный для проверки даты последнего изменения и других заголовков) до того, как браузер загрузит его.

Или лучше просто придерживаться заголовков 304 Not Modified и eTag?

Answer 1

Я думаю, что в этом случае вы должны рассмотреть автономное кэширование:

• https://developer.mozilla.org/en/Offline_resources_in_Firefox#Specifying_a_cache_manifest

Вы также можете хранить пользовательские входные данные в 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/

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

Answer 2

Вы можете кодировать base64 свои изображения / двоичные данные и сохранять их в виде строки в localStorage, так как URL-адреса base64 не работают в некоторых браузерах, поэтому это не идеальное решение.

С CSS и js все будет в порядке, вы можете написать их на странице или использовать URL-адрес base64.

Я бы не стал беспокоиться о нарушении работы сайта для пользователей, не являющихся JS, так как JS отключен, вы все равно не можете получить доступ к localStorage.