У меня есть страница с несколькими флажками. Я проверяю несколько из них и перейти на следующую страницу, когда я вернусь на этой странице, эти флажки должны оставаться проверены, как они были прежде, чем перейти на другую страницу. Нужно сделать это с JavaScript. Любой ключ ??
Сохранение значений CheckBox
голоса
2
3 ответов
голоса 1
1
Вы должны будете упорствовать их между страницами-запросами. Вы можете использовать сессии или куки, чтобы сделать это. Какой типа сервера вы работаете, и с каким типом серверного языка?
Предыдущие вопросы на SO есть адрес записи / чтения куки с JavaScript.
голоса 4
4
Если вы ограничены только JavaScript и не на стороне сервера языка, я думаю, что вы оставили для чтения / записи куки для поддержания состояния. Как ссылаются другие стороны сервера технологии намного лучше в этом, но если вы должны:
JavaScript код печенья образец (ссылка: 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);
}
голоса 0
0
Я не думаю , что есть достаточно сложный способ сделать это , не имея доступа к серверному коду, так как минимум вам необходимо установить свой код , а также определить элементы управления HTML , например , для того , чтобы проверить их. Я уверен , давая разумный код , который делает то , что вы хотите ниже.
Важные заметки:
- Код требует , чтобы каждый флажок дается четкий идентификатор атрибута.
- Проверка состояния хранится в куки с именем «JS_PERSISTENCE_COOKIE». Было бы лучше, чтобы сохранить имя этого печенья в переменном вместо его сюда вручную пары отдельных мест, как я делал. Какая переменная должна хранить имя зависит от приложения и требований.
- Было бы лучше, чтобы упаковать код внутри объекта, а не как набор свободных функций, как я сделал. Однако это не относится к вашему первоначальному вопросу.
- После нажатия кнопки несколько флажков, вы можете имитировать «навигации на эту страницу», нажав сочетание клавиш CTRL + F5. одна F5 недостаточно.
Вот код, и некоторые примеры HTML для тестирования:
<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>