Tengo una página con múltiples divs. Los usuarios pueden marcar cada div haciendo clic en un icono. Cuando se hace clic en el ícono, agrego una clase .saved-item al div. Tengo una página separada donde me gustaría mostrar todos los divs marcados, pero no sé cómo hacerlo correctamente.
Función que agrega clase al div:
$('.bookmark').on('click', function(){ $(this).parent().parent().addClass('saved-item'); });En otro archivo, intento cargar todos los elementos guardados:
$("#content").load( "speaking-mistakes.html #wrapper .saved-item" );Desafortunadamente, no funciona porque la función addClass no es permanente. También intenté agregar el div al localStorage, pero no guarda todo el diseño del div y su contenido (con botones, texto, estilo, etc.) y no creo que cargar localStorage con posiblemente cientos de divs ser una buena idea
¿Existe alguna posibilidad de "mover" o "exportar" dinámicamente un div de un archivo HTML a otro archivo HTML?
Gracias por tu ayuda.
Depende de dónde provenga el contenido.
Estas cosas normalmente se guardan en un lado del servidor de base de datos. Y cuando se hace clic en un icono, puede agregar una entrada en la tabla de marcadores en su base de datos.
Si desea hacerlo a través del lado del cliente, puede usar indexedDb o almacenamiento local
Por lo tanto, tendría una serie de identificaciones marcadas
const ids = [ 1, 35, 64 ]cuando hace clic en un ícono, puede enviar la identificación a esta matriz que luego se guarda en el almacenamiento local como este
localStorage.setItem("bookmarks", JSON.stringify(ids))Como extra, si un usuario ha iniciado sesión, puede agregar su ID de usuario como elemento 0 en la matriz de marcadores como una forma de 'autenticarlos' para que cuando otros usuarios inicien sesión, no vean los marcadores de los usuarios anteriores.
Esto realmente debería hacerse del lado del servidor para las mejores prácticas