I need to download six videos of a size 64mb roughly, store them in localStorage to avoid using data (not wifi) to download it again. The problem is that I executed the following code:
var urlVideo = "<link_of_mp4_file>"
var videoStorage = localStorage.getItem("video"),
videoElement = document.getElementById("video"),
sourceElement = document.getElementById("source_video");
if (videoStorage) {
// Reuse existing Data URL from localStorage
sourceElement.setAttribute("src", videoStorage);
}
else {
// Create XHR, Blob and FileReader objects
var xhr = new XMLHttpRequest(),
blob,
fileReader = new FileReader();
xhr.open("GET", urlVideo, true);
// Set the responseType to arraybuffer. "blob" is an option too, rendering manual Blob creation unnecessary, but the support for "blob" is not widespread enough yet
xhr.responseType = "arraybuffer";
xhr.addEventListener("load", function () {
if (xhr.status === 200) {
// Create a blob from the response
blob = new Blob([xhr.response], { type: "video/mp4" });
// onload needed since Google Chrome doesn't support addEventListener for FileReader
fileReader.onload = function (evt) {
// Read out file contents as a Data URL
var result = evt.target.result;
// Set image src to Data URL
videoElement.setAttribute("src", result);
// Store Data URL in localStorage
try {
localStorage.setItem("video", result);
}
catch (e) {
console.log("Storage failed: " + e);
}
};
// Load blob as Data URL
fileReader.readAsDataURL(blob);
}
}, false);
// Send XHR
xhr.send();
}
After testing this script I could see from the browser that the mp4 file was downloading but when it finished the task to save the video in localStorage, it throws me the following error:
Storage failed: QuotaExceededError: Failed to execute 'setItem' on 'Storage': Setting the value of 'video' exceeded the quota.
How can I store these files in localStorage?
