在 localStorage 中获取和存储 64mb mp4 文件

Question

我需要下载大约64mb大小的六个视频，将它们存储在localStorage中以避免使用数据（不是wifi）再次下载它。问题是我执行了以下代码：

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();
}

测试此脚本后，我可以从浏览器中看到 mp4 文件正在下载，但是当它完成将视频保存在 localStorage 中的任务时，它会抛出以下错误：

存储失败：QuotaExceededError：无法在“存储”上执行“setItem”：设置“视频”的值超出了配额。

如何将这些文件存储在 localStorage 中？

Answer 1

您可以启动 chrome，设置了 --unlimited-storage 标志的铬。

---

尽管注意，由于 --unlimited-storage 可以在 chrome、chromium 上设置，如果您使用这些浏览器，您可以使用 requestFileSystem 替换由 FileReader 创建的 data URI。

长度限制

虽然 Firefox 本质上支持数据 URI 长度不限，浏览器不需要支持任何特定的 数据的最大长度。例如，Opera 11 浏览器限制数据 URI 长度约为 65000 个字符。

将File 对象存储在LocalFileSystem 而不是localStorage 作为字符串。

见

• How to use webkitRequestFileSystem at file: protocol

• jQuery File Upload Plugin: Is possible to preserve the structure of uploaded folders?

• How to Write in file (user directory) using JavaScript?