Tengo una página con varias casillas de verificación. Reviso algunos de ellos y voy a la siguiente página, cuando vuelvo a esta página, estas casillas de verificación deben permanecer marcadas como estaban antes de navegar a otra página. Necesito hacerlo con Javascript. ¿¿Cualquier pista??
persistencia de los valores de la casilla de verificación
votos
2
Publicado el 20/07/2009 a las 16:28 2009-07-20 16:28
fuente por usuario ShikhaScripts
En otros idiomas...
fuente por usuario ShikhaScripts
En otros idiomas...
3 respuestas
votos 1
1
Tendrá que persistir entre las solicitudes de página. Puede usar sesiones o cookies para hacer esto. ¿En qué tipo de servidor estás trabajando y con qué tipo de lenguaje de servidor?
Las preguntas anteriores sobre SO tienen direcciones de escritura / lectura de cookies de JavaScript.
votos 4
4
Si está limitado a JavaScript solamente y no tiene un lenguaje de servidor, creo que le queda leer / escribir cookies para mantener el estado. Como otros han hecho referencia, las tecnologías del lado del servidor son mucho mejores en esto, pero si debe:
Código de muestra de cookies de JavaScript (referencia: http://www.quirksmode.org/js/cookies.html ):
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
votos 0
0
No creo que exista una forma razonablemente complicada de hacerlo sin tener acceso al código del lado del servidor, porque como mínimo debe instalar su código y también identificar los controles HTML, por ejemplo, para verificarlos. Le doy un código razonable que hace lo que quiere a continuación.
Notas importantes:
- El código requiere que cada casilla de verificación tenga un atributo de identificación distinto.
- El estado de verificación se almacena en una cookie llamada 'JS_PERSISTENCE_COOKIE'. Sería mejor almacenar el nombre de esta cookie en una variable en lugar de hardcoding en un par de lugares separados como lo he hecho. El tipo de variable que debe almacenar el nombre depende de su aplicación y sus requisitos.
- Sería mejor empaquetar el código dentro de un objeto en lugar de un conjunto de funciones gratuitas como lo hice. Sin embargo, esto no es relevante para su pregunta inicial.
- Después de hacer clic en algunas casillas de verificación, puede simular "navegar de regreso a esta página" presionando CTRL + F5. F5 solo no es suficiente.
Aquí está el código y algunos ejemplos de HTML para probar:
<body onload="restorePersistedCheckBoxes()">
<input type="checkbox" id="check1" onclick="persistCheckBox(this)" />
<input type="checkbox" id="check2" onclick="persistCheckBox(this)" />
<input type="checkbox" id="check3" onclick="persistCheckBox(this)" />
<input type="button" value="Check cookie"
onclick="alert(document.cookie)" />
<input type="button" value="Clear cookie"
onclick="clearPersistenceCookie()" />
<script type="text/javascript">
// This function reads the cookie and checks/unchecks all elements
// that have been stored inside. It will NOT mess with checkboxes
// whose state has not yet been recorded at all.
function restorePersistedCheckBoxes() {
var aStatus = getPersistedCheckStatus();
for(var i = 0; i < aStatus.length; i++) {
var aPair = aStatus[i].split(':');
var el = document.getElementById(aPair[0]);
if(el) {
el.checked = aPair[1] == '1';
}
}
}
// This function takes as input an input type="checkbox" element and
// stores its check state in the persistence cookie. It is smart
// enough to add or replace the state as appropriate, and not affect
// the stored state of other checkboxes.
function persistCheckBox(el) {
var found = false;
var currentStateFragment = el.id + ':' + (el.checked ? '1' : '0');
var aStatus = getPersistedCheckStatus();
for(var i = 0; i < aStatus.length; i++) {
var aPair = aStatus[i].split(':');
if(aPair[0] == el.id) {
// State for this checkbox was already present; replace it
aStatus[i] = currentStateFragment;
found = true;
break;
}
}
if(!found) {
// State for this checkbox wasn't present; add it
aStatus.push(currentStateFragment);
}
// Now that the array has our info stored, persist it
setPersistedCheckStatus(aStatus);
}
// This function simply returns the checkbox persistence status as
// an array of strings. "Hides" the fact that the data is stored
// in a cookie.
function getPersistedCheckStatus() {
var stored = getPersistenceCookie();
return stored.split(',');
}
// This function stores an array of strings that represents the
// checkbox persistence status. "Hides" the fact that the data is stored
// in a cookie.
function setPersistedCheckStatus(aStatus) {
setPersistenceCookie(aStatus.join(','));
}
// Retrieve the value of the persistence cookie.
function getPersistenceCookie()
{
// cookies are separated by semicolons
var aCookie = document.cookie.split('; ');
for (var i=0; i < aCookie.length; i++)
{
// a name/value pair (a crumb) is separated by an equal sign
var aCrumb = aCookie[i].split('=');
if ('JS_PERSISTENCE_COOKIE' == aCrumb[0])
return unescape(aCrumb[1]);
}
return ''; // cookie does not exist
}
// Sets the value of the persistence cookie.
// Does not affect other cookies that may be present.
function setPersistenceCookie(sValue) {
document.cookie = 'JS_PERSISTENCE_COOKIE=' + escape(sValue);
}
// Removes the persistence cookie.
function clearPersistenceCookie() {
document.cookie = 'JS_PERSISTENCE_COOKIE=' +
';expires=Fri, 31 Dec 1999 23:59:59 GMT;';
}
</script>
</body>