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, May 12 '21 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 `` tag, I would like to know when the image has been fetched by way of the URL. — cbwi, May 12 '21 at 16:19
How the image is supposed to stay on the page if you remove it from the memory? — Guerric P, May 12 '21 at 16:21
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, May 12 '21 at 16:26
Alright, thank you. To answer @Guerric P, I am actually planning to use this to see if an image has loaded in the console (through css styling) rather than in the document itself. — cbwi, May 12 '21 at 16:31

score 0 · Answer 1 · answered May 12 '21 at 16:19

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

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. — cbwi, May 12 '21 at 16:22
Okay, I guessed this was the case, but all the same thank you for your detailed answer. — cbwi, May 12 '21 at 16:25

JavaScript - Check if Object URL has been used

EDIT:

1 Answers1