Buenas tardes:
He empezado a curiosear el tema de la programación de extensiones. Hasta ahora me va muy bien, sin embargo he encontrado un pequeño escollo. Estoy programando la página de configuración en que simplemente tengo una lista de 19 campos input, de a dos, para ingresar el nombre de la página y el otro el url de la misma. Ah, lo que estoy programando es una personalización de los newtab.
Para eso, cree este página
settings.html
Código:
<html>
<head>
<title>NewTab2 Setup</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/settings.js"></script>
</head>
<body class="opciones">
<a href="index.html" target="_self" title="Abrir nueva pestaña">
<img class="irhome2" src="assets/home.png">
</a>
<h1 class="opciones"><img src="assets/icon_48.png" alt="[icon]" /> Configuración</h1>
<script type="text/javascript" src="js/campos.js"></script>
<input id="submit" type="button" value="Guardar">
</body>
</html>
Y el código de campos.js es el siguiente
campos.js
Código:
//<![CDATA[
document.write("<ol>");
for (i=1; i<19; i++) {
document.write("<li><input id='nombreIco"+i+"' title='Ingrese el nombre del web site' placeholder='Ingresa el nombre del web site' size='40'> ");
document.write("<input id='linkIco"+i+"' title='Ingrese la dirección del web site' placeholder='http://direccion_del_web_site/' size='60'><br></li>");
}
document.write("</ol>");
//]]>
Con esto logro crear 38 campos input correctamente identificados. Ahora, el problema es guardar los datos localmente. Para eso tengo este script
Código:
$(function(){
var data;
function getSavedChannel() {
if (localStorage.nombre_web1) {
$("#nombreIco1").attr("placeholder", localStorage.nombre_web1);
}
if (localStorage.link_web1) {
$("#linkIco1").attr("placeholder", localStorage.link_web1);
}
setTimeout(getSavedChannel, 1000);
} getSavedChannel();
$("#submit").click(function() {
$("#checkResponse").remove();
data = $('#nombreIco1').val();
localStorage.nombre_web1 = data;
data = $('#linkIco1').val();
localStorage.link_web1 = data;
})
})
Con el que puedo guardar, sin ningún problema, el primer dato. Pero deseo llegar a estos puntos:
1. Poder crear un loop que me permita crear ilimitados campos input, y no una cantidad fija
2. Poder leer y guardar todos los datos de los campos input creados.
¿Podrían darme pautas o recomendaciones sobre el tema?
Un saludo cordial desde Lima, Perú
Bendiciones