Ik heb een pagina met een aantal vakjes. Ik controleer een paar van hen en ga naar de volgende pagina, als ik terugkom op deze pagina, keuzevak moeten blijven gecontroleerd omdat ze voordat u naar een andere pagina waren. Noodzaak om het te doen met Javascript. Enig idee??
persistentie van checkbox waarden
stemmen
2
De vraag is gesteld op 20/07/2009 om 16:28 2009-07-20 16:28
bron van user ShikhaScripts
In andere talen...
bron van user ShikhaScripts
In andere talen...
3 antwoorden
stemmen 1
1
Je moet hen bestaan tussen pagina-verzoeken. U kunt sessies of cookies gebruiken om dit te doen. Welk type server ben je mee bezig, en met welk type server-side taal?
Vorige vragen over SO hebben adres schrijven / lezen van cookies van JavaScript.
stemmen 4
4
Als je beperkt tot alleen JavaScript en geen server-side taal Ik denk dat je naar links om te lezen / schrijven van cookies om de toestand te houden. Zoals anderen al hebben genoemd, server side technologieën zijn veel beter in deze, maar als je moet:
JavaScript-cookie monster code (referentie: 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);
}
stemmen 0
0
Ik denk niet dat er enige redelijk ingewikkelde manier om het te doen zonder enige toegang tot de server-side code, want op het minimum u nodig hebt om uw code te installeren en ook identificeren van de HTML-controles, bijvoorbeeld om ze te controleren. Ik ben het geven van een redelijke code die doet wat je wilt hieronder.
Belangrijke aantekeningen:
- De code vereist dat ieder vakje krijgt een afzonderlijke id attribuut.
- De controle toestand wordt opgeslagen in een cookie genaamd 'JS_PERSISTENCE_COOKIE'. Het zou beter zijn om de naam van deze cookie op te slaan in een variabele in plaats van hardcoding het in een paar verschillende plaatsen zoals ik heb gedaan. Wat voor soort variabele moet de naam op te slaan, hangt af van uw app en eisen.
- Het zou beter zijn om de code te verpakken binnen een object niet als een stel vrij fungeert als ik gedaan. Echter, dit is niet om uw eerste vraag relevant.
- Na het klikken op een aantal vakjes, kunt u simuleren "terug te navigeren naar deze pagina" door op CTRL + F5. F5 alleen is niet genoeg.
Hier is de code en een aantal voorbeelden van HTML voor het testen:
<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>