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

Question

I have a simple input box of type file and a button. I am trying to store the file in the session on click of button so that if page is refreshed it will be in session. I tried using

 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>

Is there any way I can do this?

Answer 1

Storing images

The idea here is to be able to take an image that has been loaded into the current web page and store it into localStorage. As we established above, localStorage only supports strings, so what we need to do here is turn the image into a Data URL. One way to do this for an image, is to load into a canvas element. Then, with a canvas, you can read out the current visual representation in a canvas as a Data URL.

Let's look at this example where we have an image in the document with an id of “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格式，并将其用作字符串