$(function() { var $items = $('#items'); $.ajax({ type: "GET", url: 'some-url', data: {}, success: function(items) { $.each(items, function(i, item){ item_polys.push(item.polygon); $items.append(`<a href="somepage.html" onclick="localStorage.setItem('item', '${item.item_id}'); localStorage.setItem('item_poly', '${item.polygon}')";>${item.item_id}</a>`); }); localStorage.setItem('item_polys', JSON.stringify(item_polys)); }, // Error handling error: function (error) { console.log(`Error ${error}`); }, });Necesito que 'item_polys' se guarde en el almacenamiento local antes de que se cargue mi página html correspondiente. También me conformaría con una forma de volver a cargar la página html solo una vez cada vez que se carga, para que se complete correctamente. Gracias (y lo siento si esto ya se ha respondido, no pude encontrar lo que estaba buscando cuando busqué)
Dado que desea que la solicitud ajax ocurra cuando el usuario está exactamente en la misma página en la que estarán los elementos poblados, creo que la única buena manera de hacerlo sería crear o mostrar los elementos de la página dinámicamente. (Esto podría ser tan simple como alternar una display: none , pero depende de cómo sea la página y de lo que desee).
Por lo tanto, haga una función como populatePage que muestre la página, donde el estado predeterminado de la página es una pantalla de carga (o en blanco, o lo que quiera que el usuario vea cuando la solicitud está en curso). tal vez algo como
const populatePage = () => { const items = JSON.parse(localStorage.items); for (const item of items) { $items.append(`<a href="somepage.html" onclick="localStorage.setItem('item', '${item.item_id}'); localStorage.setItem('item_poly', '${item.polygon}')";>${item.item_id}</a>`); } $('main').show(); }; donde main es el contenedor que desea mostrar cuando todo esté listo y tiene un estilo que lo oculta de forma predeterminada. Después:
En la carga de la página, verifique si el elemento existe en el almacenamiento. Si es así, utilícelo y llame a populatePage inmediatamente. De lo contrario, haga que la página siga mostrando el banner de carga o la pantalla en blanco, realice la solicitud ajax y llame a populatePage cuando haya terminado.
$.ajax({ // ... success: function (items) { localStorage.items = JSON.stringify(items); populatePage();