JS 반복 처리에 대한 로컬저장문제와 PHP의 Request의 비동기처리

안녕하세요. 좋은밤입니다.

웹 앱을 개발하던중 JS의 localStorage문제가 있어서 이렇게 글을 쓰게되네요.

• 제가 만들고 있는 서비스: http://app.ihnkyou.gq/#/trend 에서 발생한 문제인데요.

한 차트를 일괄 다운로드시 다운로드 기록을 LocalStorage에 저장하여야 하는데 가장 마지막 음악만 저장됩니다ㅠㅠ.

또 다운로드도 Chrome과 Opera에서 일부 파일이 누락되는 현상도 발생하고요.

function downloadTrend() {
    if (!window.proxy.isProcessing) {
        var trends = window.proxy.getTrends.getSelectedRowIds();
        if (trends.length > 0) {
            mdc.exports.dialog("The download will begin.", "Download " + trends.length + " song.\nMusic that previously had a download history won't download.", {
                "download": function () {
                    mdc.exports.snackbar("Download started.");
                    window.proxy.isProcessing = true;
                    for (var i = 0; i < trends.length; i++) {
                        if (localStorage.getItem(trends[i]) == undefined) {
                            var xhr = new XMLHttpRequest();
                            var vId = trends[i];
                            xhr.open("GET", iTrendApiUri + "process.php?id=" + vId);
                            xhr.send();
                            xhr.onreadystatechange = function () {
                                if (this.status == 200 && this.readyState == 4) {
                                    var res = JSON.parse(this.response);
                                    if (res.success) {
                                        fetch(iTrendApiUri + "v/" + res.hash + ".mp3").then(response => response.blob()).then(blob => {
                                            const url = window.URL.createObjectURL(blob);
                                            const a = document.createElement("a");
                                            a.style.display = "none";
                                            a.href = url;
                                            a.download = res.audio + ".mp3";
                                            document.body.appendChild(a);
                                            a.click();
                                            window.URL.revokeObjectURL(url);
                                            document.body.removeChild(a);
                                            console.log(localStorage)
                                        }).catch(fail => {
                                            console.log("Missing download list:" + res.audio);
                                            mdc.exports.snackbar("Missing download list:" + res.audio)
                                        });
                                        window.localStorage.setItem(vId, new Date)
                                    } else {
                                        console.log(res);
                                        mdc.exports.snackbar("ERROR: " + res.audio + ": " + res.reason)
                                    }
                                } else if (this.readyState == 4) {
                                    mdc.exports.snackbar("ERROR: Unable to connect: iTrend DL Server")
                                }
                            }
                        }
                    }
                    window.proxy.isProcessing = false
                }
            })
        } else {
            mdc.exports.snackbar("Please select a song to download.")
        }
    } else mdc.exports.snackbar("Error: There is another work in progress")
}

일단 Success라면 저장이 되어야 되는데 무시되네요ㅜㅜ 왜인지 모르겠습니다.

구글에 찾아보니까 같은 현상을 겪는 사람들이 전무한가 봅니다.

그리고 이 서비스에서 차트를 불러오는데 다음과 같은 PHP 소스를 사용하는데요.

$url = "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&key={$key}&playlistId=".$playlist[$_GET["region"]];

$api = json_decode(file_get_contents($url),true);
$main = $api["items"];

$response = array();

$allVideoId = array();

for ($e=0; $e < count($main); $e++) { 
$videoElement = $main[$e]["snippet"]["resourceId"]["videoId"];
array_push($allVideoId, $videoElement);
};
/*
Trend Music Get PlayTime
*/
$__trendGetPlayTimeByVid = urlencode(implode(",", $allVideoId));

$url = "https://www.googleapis.com/youtube/v3/videos?part=contentDetails&key={$key}&id=".$__trendGetPlayTimeByVid;

$rawVideoDetails = json_decode(file_get_contents($url),true);
$videoDetails = $rawVideoDetails["items"];
/*
Trend Music Get Artist
*/
$url = "https://www.googleapis.com/youtube/v3/videos?part=snippet&key={$key}&id=".$__trendGetPlayTimeByVid;

$rawVideoSnippet = json_decode(file_get_contents($url),true);
$videoSnippet = $rawVideoSnippet["items"];


/*
Manufacture Contents
*/
for ($i=0; $i < count($main); $i++) {
$v = array();
$video = $main[$i]["snippet"];

$v["title"] = $video["title"];
$v["id"] = $video["resourceId"]["videoId"];
$v["description"] = $video["description"];
$v["playtime"] = $videoDetails[$i]["contentDetails"]["duration"];
$v["artist"] = str_replace(" - Topic", "", $videoSnippet[$i]["snippet"]["channelTitle"]);

array_push($response, $v);
}
$response = json_encode($response);
echo $response;

이게 엄청 작업 처리 속도가 엄청 느립니다. 그래서 자체 캐싱시스템을 사용하긴 하는데 초기 로딩시에는 속이 터질정도로 느립니다.

동기적으로 처리하는것 같아서 그러는것 같은데 PHP만으로 이 작업 속도를 끌어 올리는방법은 없을까요?

이거 하나 때문에 Node.js 로의 언어 변경도 생각중입니다.

JS PHP 고수분들 도와주세요!