Пример на JS:
Заполните форму и нажмите кнопку "Запомнить"
Далее можно обновить или закрыть страницу, но эти данные сохранятся.
HTML:
|
1 2 3 4 |
<form id="myform"> <input type="text" name="text" /> <!-- другие элементы формы --> </form> |
JS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
//Запоминаем function remember(form) { let inpAct = []; let fInp = form.getElementsByTagName('input'); let z = fInp.length; let kl; for (let i = 0; i < z; i++) { if ((fInp[i].type == 'text') || (fInp[i].type == 'email') || (fInp[i].type == 'number') || (fInp[i].type == 'date') || (fInp[i].type == 'month') || (fInp[i].type == 'range') || (fInp[i].type == 'tel') || (fInp[i].type == 'search') || (fInp[i].type == 'week') || (fInp[i].type == 'datetime-local') || (fInp[i].type == 'time') || (fInp[i].type == 'color') || (fInp[i].type == 'url')) { inpAct[inpAct.length] = fInp[i].value; } else if ((fInp[i].type == 'radio') || (fInp[i].type == 'checkbox')) { if (fInp[i].checked) { kl = 1; } else { kl = 0; } inpAct[inpAct.length] = kl; } else { inpAct[inpAct.length] = ""; } } localStorage.inpAct = JSON.stringify(inpAct); let textAct = []; let fText = form.getElementsByTagName('textarea'); z = fText.length; for (let i = 0; i < z; i++) { textAct[textAct.length] = fText[i].value; } localStorage.textAct = JSON.stringify(textAct); let selAct = []; let fSel = form.getElementsByTagName('select'); z = fSel.length; for (let i = 0; i < z; i++) { selAct[selAct.length] = fSel[i].value; } localStorage.selAct = JSON.stringify(selAct); alert("Веденные вами данные сохранены"); } //Вспоминаем function recollect(form) { if (localStorage.inpAct != undefined) { let inpAct = []; inpAct = localStorage.inpAct ? JSON.parse(localStorage.inpAct) : []; let fInp = form.getElementsByTagName('input'); let z = fInp.length; for (let i = 0; i < z; i++) { if ((fInp[i].type == 'text') || (fInp[i].type == 'email') || (fInp[i].type == 'number') || (fInp[i].type == 'date') || (fInp[i].type == 'month') || (fInp[i].type == 'range') || (fInp[i].type == 'tel') || (fInp[i].type == 'search') || (fInp[i].type == 'week') || (fInp[i].type == 'datetime-local') || (fInp[i].type == 'time') || (fInp[i].type == 'color') || (fInp[i].type == 'url')) { fInp[i].value = inpAct[i]; } else if ((fInp[i].type == 'radio') || (fInp[i].type == 'checkbox')) { fInp[i].checked = inpAct[i]; } } } if (localStorage.textAct != undefined) { let textAct = []; textAct = localStorage.textAct ? JSON.parse(localStorage.textAct) : []; let fText = form.getElementsByTagName('textarea'); let z = fText.length; for (let i = 0; i < z; i++) { fText[i].value = textAct[i]; } } if (localStorage.selAct != undefined) { let selAct = []; selAct = localStorage.selAct ? JSON.parse(localStorage.selAct) : []; let fSel = form.getElementsByTagName('select'); let z = fSel.length; for (let i = 0; i < z; i++) { fSel[i].value = selAct[i]; } } } recollect(document.getElementById('myform')); |
Запоминание данных формы осуществляется функцией remember, например:
<input type="button" onclick="remember(document.getElementById('myform'))" value="Запомнить" />
А установка значений функцией recollect
Пример на jQuery:
Заполните форму, введенная информация будет сохраняться автоматически.
Далее можно обновить или закрыть страницу, но эти данные сохранятся.
HTML:
|
1 2 3 4 |
<form data-persist="garlic"> <input type="text" name="text" /> <!-- другие элементы формы --> </form> |
jQuery:
Просто подключаем jQuery и плагин garlic.min.js
Подробнее о нем можно узнать на сайте авторов garlicjs.org
Добавить комментарий: