11

例如，假设用户将一些非常大的图像或媒体文件加载到您的 Web 应用程序中。当他们返回时，您希望您的应用程序显示他们之前加载的内容，但由于数据太大而无法将实际文件数据保留在 LocalStorage 中。

4

3 回答 3

7

这是不可能的localStorage。存储的数据localStorage需要是可序列化的原始类型之一。这不包括File对象。

例如，这不会像您期望的那样工作：

var el = document.createElement('input');
el.type='file';
el.onchange = function(e) {
  localStorage.file = JSON.stringify(this.files[0]);
  // LATER ON...
  var reader = new FileReader();
  reader.onload = function(e) {
    var result = this.result; // never reaches here.
  };
  reader.readAsText(JSON.parse(localStorage.f));
};
document.body.appendChild(el);

解决方案是使用更强大的存储选项，例如将文件内容写入HTML5 文件系统或将其存储在IndexedDB中。

于 2011-08-24T03:41:47.953 回答
-1

从技术上讲，如果您只需要在 localStorage 中保存小文件，则可以。

只是base64，因为它是一个字符串......它是本地存储友好的。

我认为 localStorage 的限制约为 5MB。base64 字符串的文件大小非常小，因此这是一种存储小图像的可行方法。如果你使用这个懒人的方式，缺点是你必须注意 5MB 的限制。我认为这可能是一个解决方案，具体取决于您的需求。

于 2015-09-22T01:20:14.623 回答
-3

是的，这是可能的。您可以将有关文件的任何信息插入到 LocalStorage 中，前提是您将其序列化为支持的原始类型之一。您还可以将整个文件序列化到 LocalStorage 并在以后根据需要检索，但文件大小存在限制，具体取决于浏览器。

下面展示了如何使用两种不同的方法来实现这一点：

(function () {
// localStorage with image
var storageFiles = JSON.parse(localStorage.getItem("storageFiles")) || {},
    elephant = document.getElementById("elephant"),
    storageFilesDate = storageFiles.date,
    date = new Date(),
    todaysDate = (date.getMonth() + 1).toString() + date.getDate().toString();

// Compare date and create localStorage if it's not existing/too old   
if (typeof storageFilesDate === "undefined" || storageFilesDate < todaysDate) {
    // Take action when the image has loaded
    elephant.addEventListener("load", function () {
        var imgCanvas = document.createElement("canvas"),
            imgContext = imgCanvas.getContext("2d");

        // Make sure canvas is as big as the picture
        imgCanvas.width = elephant.width;
        imgCanvas.height = elephant.height;

        // Draw image into canvas element
        imgContext.drawImage(elephant, 0, 0, elephant.width, elephant.height);

        // Save image as a data URL
        storageFiles.elephant = imgCanvas.toDataURL("image/png");

        // Set date for localStorage
        storageFiles.date = todaysDate;

        // Save as JSON in localStorage
        try {
            localStorage.setItem("storageFiles", JSON.stringify(storageFiles));
        }
        catch (e) {
                console.log("Storage failed: " + e);                
        }
    }, false);

    // Set initial image src    
    elephant.setAttribute("src", "elephant.png");
}
else {
    // Use image from localStorage
    elephant.setAttribute("src", storageFiles.elephant);
}

// Getting a file through XMLHttpRequest as an arraybuffer and creating a Blob
var rhinoStorage = localStorage.getItem("rhino"),
    rhino = document.getElementById("rhino");
if (rhinoStorage) {
    // Reuse existing Data URL from localStorage
    rhino.setAttribute("src", rhinoStorage);
}
else {
    // Create XHR, BlobBuilder and FileReader objects
    var xhr = new XMLHttpRequest(),
        blob,
        fileReader = new FileReader();

    xhr.open("GET", "rhino.png", true);
    // Set the responseType to arraybuffer. "blob" is an option too, rendering BlobBuilder 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: "image/png"});

            // 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
                rhino.setAttribute("src", result);
                // Store Data URL in localStorage
                try {
                    localStorage.setItem("rhino", result);
                }
                catch (e) {
                    console.log("Storage failed: " + e);
                }
            };
            // Load blob as Data URL
            fileReader.readAsDataURL(blob);
        }
    }, false);
    // Send XHR
    xhr.send();
}
})();

资源

于 2011-08-17T22:24:25.267 回答