Efficient way to save a File object locally for later use

Question

Hello! I am developing a web app, and in it uploading files are done.
When the user is offline (it’s a PWA) I need to save these files locally to upload later. I cannot save a File object directly to localStorage, so I am using this function to convert the contents of the file into an array of bytes, use JSON.stringify to convert the array in a JSON string and then save to localStorage:

async function FileToJSONString(file, callback) {
    console.log(file);
    let result =
    await file
    .stream()
    .getReader()
    .read();

    let value = result.value;
    callback(JSON.stringify(value))
}

Problem: The problem is that saving the file contents in this way uses a lot of space and has a high cost of performance.

Question: Is there another more appropriate way to save the file locally? (I don’t mind using another form of storage other than localStorage)