Как подключить JSON файл с кешированием для передачи данных в JS?

Question

[Dubrovin]

Часто возникают задачи в JS, связанные с обработкой каких-либо больших данных, например, список всех Google-шрифтов с параметрами, данные иконок иконпака включая svg и тому подобное. Данные эти удобно хранить в отдельных json файлах.
Задача подключения и передачи в JS данных из JSON решается "в лоб" объявлением глобальной переменной с данными из PHP:

echo '<script>let gfonts = ' . file_get_contents( 'путь к JSON файлу' ) . ';</script>';

Однако в данном случае эти данные никак не кэшируются браузрером. Хотелось бы подключить JSON файл по URL и иметь возможность работы с ним из JS. Вариант конвертации JSON в JS не подходит, потому что данные требуются для скриптов PHP (в PHP с JSON работать удобно).
Как решить задачу подключения JSON с кешированием?

Answer 1

[Robur]

Хотелось бы подключить JSON файл по URL и иметь возможность работы с ним из JS.

Так и сделайте к нему прямой доступ по ссылке и дергайте аяксом, кто ж вам не дает.
С правильными заголовками - будет кешироваться браузером наравне с картинками/css и прочим.

Если не хочется дергать аяксом - то сделайте отдельную php страницу которая будет отдавать эти данные в виде js-скрипта и подключайте тегом "

<script src="http://myserver/path-to-file.php"></script>

",
в path-to-file.php

echo 'let gfonts = ' . file_get_contents( 'путь к JSON файлу' )';

Comments

[Dubrovin]

Пример с php бесполезен, в самом вопросе я указал, что сейчас все именно так и сделано.

[Robur]

Вы не поняли что я предлагаю, у вас сделано совсем по другому - вы делаете script тег в HTML.
Есть разница отдавать HTML или отдавать JS. Оба могут быть сгенерированы через PHP, однако в моем варианте это будет в отдельном от всего остального js файле который прекрасно кешируется.

[Dubrovin]

Robur, в атрибуте src у вас файл php, он не будет кешироваться

[Robur]

Dubrovin, это от вас зависит - если вы ничего не сделаете то конечно не будет, если настроите заголовки как надо - то будет. Браузеру все равно php там или json или еще что

Answer 2

[Otrivin]

Можно попробовать хранить в localStorage; если в нем не сохранен - подтягивать с сервера

Answer 3

[grinat]

<script id="data" type="application/json">{"org": 10, "items":....... 

var data = JSON.parse(document.getElementById('data').innerHTML)

Comments

[Dubrovin]

Рано отметил решением, скрипт должен загружаться по src вот таким образом:

<script id="gfonts" type="application/json" src="' . $source . '"></script>

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

[grinat]

Dubrovin, так не выйдет.
Либо https://github.com/addyosmani/basket.js/

basket
  .require({ 
     url: 'https://jsonplaceholder.typicode.com/todos/1',
     key: 'todo',
     execute: false
  }).then(() => {
     const cached = basket.get('todo')
     console.log(cached)
  })

либо через service worker

Answer 4

[Анатолий Чернышев]

Предполагаю, что вам нужна подобная конструкция
https://ruhighload.com/%D0%9A%D0%B0%D0%BA+%D0%B2%D...