Как загрузить кэшированный массив php в переменную js?

Question

Как загрузить кэшированный массив php в переменную js?

У меня есть рабочий код PHP, который получает данные от двух API, а затем локально кэширует HTML. Он также кэширует массив PHP в файл с именем "cache_file" с типом File.

У меня есть фрагмент JavaScript в конце файла PHP, который загружает массив PHP в массив JavaScript и показывает его на консоли.

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

Я кэшировал массив PHP, используя код, описанный в лучшем ответе в разделе " Кэширование массива PHP".

Для кэширования в файл:

file_put_contents("cache_file", serialize($myArray));

Затем загрузить кеш:

$myArray = unserialize(file_get_contents("cache_file"));

Я предполагаю, что часть массива загрузки PHP не работает, так как сервер не вызывается при обновлении страницы, так как он находится внутри кода PHP.

JS находится внутри самого файла PHP, как показано ниже:

<script>
    var udemyServerData = <?=json_encode($udemyKeywords)?>; //loading php array into JS array

    var courseraServerData = <?=json_encode($courseraKeywords)?>;//loading another php array into JS array                                              

    var commonServerData = udemyServerData.concat(courseraServerData);
    var modifiedServerData = new Array();
    for (i = 0; i < udemyServerData.length; i++) { 
    modifiedServerData.push({
    "value": 'udemy',
    "text": udemyServerData[i]
    });
}
    for (i = 0; i < courseraServerData.length; i++) { 
    modifiedServerData.push({
    "value": 'coursera',
    "text": courseraServerData[i]
    });
}

    console.log(udemyServerData);
    console.log(courseraServerData);
</script>