0

Como editar um item existente no localStorage em uma página HTML em blob?

O item vem de outra página e é substituído na página de blob, mas quando você tenta substituí-lo, acaba criando um novo acessível apenas dentro da página blob, não é possivel acessa-lo fora da pagina em blob, nem mesmo pelo console do navegador, procurei sobre isso e não achei nada informando essa limitação do blob.

É possível editar o item fora da pagina em blob com o mesmo dominio?

Link de um exemplo no 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.

1 Resposta 1

1

Quando seu script começa a ser interpretado ele salva um valor no localStorage, constrói a função newBlob e troca o href passando o resultado da função newBlob.

Ao substituir o href é como se você trocasse de endereço, então supondo que seu endereço local (um arquivo local .html) seja C:/meudiretorio/arquivo.xml ao substituir o href passando o Object URL, seu navegador irá trocar o endereço para por exemplo blob:null/9feeeee0-bba8-4f70-b63f-4b3d015a5996.

Trocando a origem do documento o localStorage será diferente e por esta razão não funcionará. Então considerando sua pergunta, nestas condições, a resposta será: não é possível.

5
  • mesmo que o blob esteja no mesmo domínio de uma pagina normal? como por exemplo no codepen o dominio https://cdpn.io/... em seguida blob:https://cdpn.io/cd18b45a-84ea-4a2b-9cad-3bb488d0f28f
    – Mark Vaaz
    17/10/2019 às 17:01
  • @MarkVaaz no codepen a origem do documento não muda. Toda vez que você altera o código ele troca apenas o final do src do iframe: https://cdpn.io/boomboom/v2/index.html?key=iFrameKey-XXXXX o endereço origem do documento permanece inalterado. Neste caso, como a origem é a mesma, o localStorage funciona utilizando sua lógica. Toda vez que a origem for alterada o localStorage terá uma nova instância associada a origem. 17/10/2019 às 17:21
  • No caso, não funciona no codepen, e na verdade o src do iframe não muda, mas conforme você passa um novo endereço ele passa a ser o novo endereço do iframe.
    – Mark Vaaz
    17/10/2019 às 18:18
  • @MarkVaaz acabei de abrir seu link no codepen e está funcionando corretamente. Ao clicar no botão o valor working inside the blob é exibido no body.innerHTML. Se você retirar o trecho localStorage.setItem('test', 'working inside the blob '); será exibido "not working". Veja que o localStorage é o mesmo antes e depois do clique já que a origem do documento não foi alterada. Se você puder, detalhe um pouco mais por favor sua dúvida caso não tenha ficado claro 17/10/2019 às 18:27
  • @MarkVaaz apenas complementando, a origem do src do iframe se mantém. Englobe seu script com um setTimeout de uns 2s e logo na primeira linha fora do setTimeout printe o endereço. Você verá algo do tipo: cdpn.io/boomboom/v2/… e depois de 2s blob:cdpn.io/c42af343-2b6b-4679-996e-78c71a97c2d3 17/10/2019 às 18:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .