Extraigo una lista de nombres de archivos de mi base de datos y los enumero dinámicamente con jquery. Se agregan al html como una lista desordenada. Quiero que cada elemento se vincule a mi página de detalles, pero también necesito la identificación del archivo para guardarlo en el almacenamiento local al hacer clic. es posible? ¿Solo necesito trabajar en mi sintaxis? Cualquier ayuda es apreciada.
función jquery:
$(function() { var $files = $('#files'); $.ajax({ type: "GET", url: 'some url', data: {}, success: function(files) { $.each(files, function(i, file){ $files.append('<a href="details.html" onclick="localStorage.setItem("file", +file.id+)";>'+file.id+'</a>'); }); }, // Error handling error: function (error) { console.log(`Error ${error}`); } }); })HTML
<ul id="files"></ul>Tienes comillas dobles dentro de comillas dobles y algunos signos "más" aleatorios.
Cambie su código a esto, para usar una plantilla literal en su lugar: ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals )
$files.append(`<a href="details.html" onclick="localStorage.setItem('file', '${file.id}')";>${file.id}</a>`); El uso de plantillas de cadena le permitirá imprimir directamente el valor de una variable en la cadena con ${variableName}
Vaya, no entendí bien la pregunta y dejé esta respuesta sobre cómo almacenar en caché una lista en localStorage en caso de que alguien la necesite:
Antes de extraer de su base de datos, vea si existe en el almacenamiento local:
$(function() { let storedFiles = window.localStorage.getItem('stored_files'); if(storedFiles !== null) { //found in local storage, use this: files = JSON.parse(storedFiles); //local storage is stored as a string, you have to convert back to an object //generate the list of files generateListOfFiles(files); } else { // not found in local storage, get from database $.ajax({ type: "GET", url: 'some url', data: {}, success: function(files) { //generate the list of files: generateListOfFiles(files); // now store the files back in local storage for next time! window.localStorage.setItem("stored_files", JSON.stringify(files)); // local storage should be stored as a string, as mentioned above }, // Error handling error: function (error) { console.log(`Error ${error}`); } }); } function generateListOfFiles(files) { $.each(files, function(i, file){ let $files = $('#files'); $files.append('<a href="details.html" onclick="localStorage.setItem("file", +file.id+)";>'+file.id+'</a>'); }); } });