Javascript Question posted in
A very good W3school tutorial can be found here.

JavaScript: How to use blob URL saved in localStorage after reload

I am building an app in Next.js with no server. I get a video file input using an <input> tag, after that I convert it to a blob url and save it in localStorage for cross-session use.

However, after reloading the page the blob URL becomes invalid (at least that’s what I think,) how can I use the blob after reload or is there an alternative ways?

My Code:

// convert file obj to blob url and save to localStorage

localStorage.setItem('temp', URL.createObjectURL(data.file[0]))

// get video blob url and set it as videoRef src

const vidUrl = localStorage.getItem('temp')
videoRef.current.src = vidUrl;
Tags:

2

Answers


  1. 0

    It sounds like you are using the built in blob url that the browser creates when you upload something on to the browser. This url is only temporarily when the browser keeps the file in memory and as soon as you refresh the page it will clear it, resulting in the url becoming invalid.

    If you want to access the file later on, you will need to store it in a permanent storage. You can try to store it locally on your webserver if it allows for it or use a storage provider, like Blobstorage, S3 Buckets, etc.

    Login or Signup to reply.
  2. 0

    The blob is valid only for the duration of the browser session. Therefore, you can either store the blob data somewhere on the server, or you can convert the blob data to a Base64 string and store this string in localStorage.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search