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.