JavaScript - Check if Object URL has been used

Question

I can create an object URL like this:

let pixel = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
let data = atob(pixel);
let buffer = new ArrayBuffer(data.length);
let array = new Uint8Array(buffer);
for (var i = 0;i<data.length;i++){
    array[i]=data.charCodeAt(i);
}
let blob = new Blob([buffer], {type: 'image/jpeg'});
let url = URL.createObjectURL(blob);

And I can revoke an object URL like this:

URL.revokeObjectURL(url);

But what I would like to do is automatically revoke the URL after one use.

Is there a way to check if an object URL has been accessed?

Thank you in advance.

EDIT:

In this case, I can't just trigger a function when I use the URL. Instead, I would like to be able to check if it has been used even OUTSIDE of the page. An example would be if someone typed the URL into the address bar, this can't call javascript AFAIK.

If you don't have an API to do this, you could use localstorage to track this I guess — painotpi
– painotpi, Commented May 12, 2021 at 16:07
@Guerric P, I mean once the URL has been used to fetch the resource. For example, if it was included in an <img/> tag, I would like to know when the image has been fetched by way of the URL. — cbwi
– cbwi, Commented May 12, 2021 at 16:19
As I've mentioned in the other comment thread under my answer, this is not possible purely on the client-side. You'll need a server for this. Even with that, typing a URL into an address bar may not trigger a request for that url. /cc @GuerricP — painotpi
– painotpi, Commented May 12, 2021 at 16:26

painotpi · Accepted Answer · 2021-05-12 16:19:58Z

0

If you don't have an API to do this, you could use localStorage to track this.

You could have 2 methods,

addUrlStatus - which takes a url as input and checks whether it has been accessed in the past.
updateUrlStatus - which sets the status of a url to true in localStorage once the user has used the url (not sure what action defines this in your code).

So you could do something like,


let pixel = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
let data = atob(pixel);
let buffer = new ArrayBuffer(data.length);
let array = new Uint8Array(buffer);
for (var i = 0;i<data.length;i++){
    array[i]=data.charCodeAt(i);
}
let blob = new Blob([buffer], {type: 'image/jpeg'});
let url = URL.createObjectURL(blob);
addUrlStatus(url);


function addUrlStatus(url) {
  var _url = localStorage.getItem(url);
  if(!_url) {
    localStorage.setItem(url, false); // false indicates it hasn't been used yet.
    return;
  }
}


// this function needs to be called when the user has used the url.
function updateUrlStatus(url) {
  localStorage.setItem(url, true);
  URL.revokeObjectURL(url);
}

answered May 12, 2021 at 16:19

painotpi

7,0122 gold badges40 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

cbwi Over a year ago

thank you for the quick response! This isn't what I need it for though. I would like to be able to check if the URL has been used WITHOUT calling a function. For example, if a random user typed the URL into the address bar, I would like to be able to tell if they reached the resource.

painotpi Over a year ago

That's not possible purely on the client-side.

cbwi Over a year ago

Okay, I guessed this was the case, but all the same thank you for your detailed answer.

Collectives™ on Stack Overflow

JavaScript - Check if Object URL has been used

EDIT:

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDIT:

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related