How to edit an existing localStorage item in a blob url

Question

How to edit an existing item in localStorage on an HTML blob page?

The item comes from another page and is replaced on the blob page, but when you try to replace it, you end up creating a new one accessible only inside the blob page, it is not possible to access it outside the blob page, not even by the browser console, I searched on this and found nothing informing this limitation of the blob.

You can edit the item outside the blob page with the same domain?

Example link in codepen: https://codepen.io/markvaaz/pen/LYYZgYE

//cria um item no localStorage (Ainda em um pagina comum)
localStorage.setItem("test", "not working")
//cria uma url blob
function newBlob(text){
  var blob = new Blob(["\ufeff", text], {type: "text/html"})
  var url = window.URL.createObjectURL(blob)
  return url
}
//da um conteúdo para o blob e entra na url blob retornada
window.location.href = newBlob(`<button onclick="localStorage.setItem('test', 'working')">Click here to replace the item</button>`)
//a função do botão é substituir o item que foi criado anteriormente com um novo conteúdo, porém acaba criando um novo item acessivel apenas dentro da pagina blob, não é possivel acessar o item no console do navegador.

Answer 1

When your script starts to be interpreted it saves a value in the localStorage, builds the function newBlob and exchange the href passing the function result newBlob.

By replacing the href It’s like you switched addresses, so assuming your local address (a local file .html) be it C:/meudiretorio/arquivo.xml by replacing the href passing the Object URL, your browser will change the address to for example blob:null/9feeeee0-bba8-4f70-b63f-4b3d015a5996.

Changing the origin of the document localStorage will be different and for this reason will not work. Then considering your question, in these conditions the answer will be: it is not possible.