如何在会话存储或本地存储中存储文件（txt、pdf 等）？

Question

我有一个简单的文件类型输入框和一个按钮。 我试图在单击按钮时将文件存储在会话中，以便刷新页面时它将处于会话中。 我尝试使用

 function storeInSession(){ element = document.getElementById('attachments') var file = element.files[0]; sessionStorage.setItem('fileInSession', file) sessionFile = sessionStorage.getItem('fileInSession') }

 <input type="file" id="attachments"> <button onclick="storeInSession()">Upload</button>

有什么办法可以做到这一点吗？

Answer 1

存储图像

这里的想法是能够获取已加载到当前网页中的图像并将其存储到 localStorage 中。 正如我们上面建立的，localStorage 只支持字符串，所以我们这里需要做的是将图像转换为数据 URL。 对图像执行此操作的一种方法是加载到画布元素中。 然后，使用画布，您可以将画布中的当前视觉表示作为数据 URL 读出。

让我们看看这个例子，我们在文档中有一个 id 为“elephant”的图像：

// Get a reference to the image element
var elephant = document.getElementById("elephant");

// 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);

    // Get canvas contents as a data URL
    var imgAsDataURL = imgCanvas.toDataURL("image/png");

    // Save image into localStorage
    try {
        localStorage.setItem("elephant", imgAsDataURL);
    }
    catch (e) {
        console.log("Storage failed: " + e);
    }
}, false); 

Answer 2

您可以将二进制数据编码为base64格式，并将其用作字符串