使用LocalStorage保存文件内容

时间:2017-07-20 20:21:04

标签: javascript file

我想在JavaScript中将文件内容(带blob)放在localstorage中。但Firefox上的本地存储限制为5MB,只有Firefox和Opera可以增加Dom存储(localstorage)的大小。我已成功将视频文件存储在localstorage上:

var urlVideo = "sample.mp4";
var videoStorage = localStorage.getItem("sample.mp4");
var videoElement = document.getElementById("video");
var videoSource = document.getElementById("source");

if (videoStorage)
{
    // Loaded from localstorage
    videoElement.setAttribute("src", videoStorage);
}
else
{
    // Loaded online
    var xhr = new XMLHttpRequest(),
        blob,
        fileReader = new FileReader();

    xhr.open("GET", urlVideo, true);
    xhr.responseType = "arraybuffer";

    xhr.addEventListener("load", function () {
        if (xhr.status === 200) {
            blob = new Blob([xhr.response], { type: "video/mp4" });
            fileReader.onload = function (evt) {
                var result = evt.target.result;
                try {
                    localStorage.setItem("sample.mp4", result);
                }
                catch (e) {
                    console.log("Failed : " + e);
                }
            };
            fileReader.readAsDataURL(blob);
            videoElement.src = window.URL.createObjectURL(blob);
        }
    }, false);
    xhr.send();
}

所以我希望在JavaScript中有一个简单的方法,可以在每个浏览器上本地存储大文件内容,而无需浏览器设置。所以我听说使用indexedDB是可能的,但似乎更复杂。

0 个答案:

没有答案
相关问题