Задача: Сохранение данных формы после перезагрузки через куки
Исходник: Сохранение данных формы после перезагрузки с помощью кук, язык: javascript [code #140, hits: 10545]
автор: - [добавлен: 22.05.2006]
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Form Session</title>
  5. </head>
  6. <body>
  7. <script type="text/javascript">
  8. <!--
  9. /**
  10. * Сохраняем форму. Функция принимает ссылку на форму. Форма должна иметь
  11. * уникальный аттрибут ID.
  12. */
  13. function saveFormSession(form) {
  14. if(!form||!form.id||!/^[^;=]+$/.test(form.id)) return;
  15. var data="", tok, el, safe_name;
  16. for(var i=0; i<form.elements.length; i++) {
  17. if((el=form.elements[i]).name==""||el.getAttribute("skip_form_save")!=null) continue;
  18. safe_name=el.name.replace(/([)\\])/g, "\\$1");
  19. switch(el.type) {
  20. case "text":
  21. case "textarea": tok="v("+safe_name+"):"+el.value.replace(/([|\\])/g, "\\$1")+"||"; break;
  22. case "radio":
  23. case "checkbox": tok="s("+safe_name+"):"+(el.checked? "1": "0")+"||"; break;
  24. case "select-one": tok="i("+safe_name+"):"+(el.selectedIndex)+"||"; break;
  25. default: tok="";
  26. }
  27. data+=tok;
  28. }
  29. if(data>=4000) return alert("Can't save form into cookie, to much data...");
  30. document.cookie="ses"+form.id+"="+escape(data);
  31.  
  32. return true;
  33. }
  34. /**
  35. * Восстановить значение формы. Форма должна иметь уникальный атттрибут ID.
  36. */
  37. function restoreFormSession(form) {
  38. if(!form||!form.id||!/^[^;=]+$/.test(form.id)) return false;
  39. var strt, end, data, nm, dat;
  40. if((strt=document.cookie.indexOf("ses"+form.id))<0) return false;
  41. if((end=document.cookie.indexOf(";", strt + form.id.length + 3))<0) end=document.cookie.length;
  42. data=unescape(document.cookie.substring(strt + form.id.length + 4, end)).split("||");
  43. for(var i=0; i<data.length-1; i++) {
  44. nm=/^[vsi]\(((?:[^)\\]|(?:\\\))|(?:\\\\))+)\)\:/.exec(data[i]);
  45. nm[1]=nm[1].replace(/\\([)\\])/g, "$1");
  46. dat=data[i].substr(nm[0].length).replace(/\\([|\\])/g, "$1");
  47. switch(data[i].charAt(0)) {
  48. case "v": form.elements[nm[1]].value=dat; break;
  49. case "s": form.elements[nm[1]].checked=(dat=="1"? true: false); break;
  50. case "i": form.elements[nm[1]].selectedIndex=dat; break;
  51. }
  52. }
  53.  
  54. return true;
  55. }
  56. //-->
  57. </script>
  58. <!-- Пример использования -->
  59. <form id="test1">
  60. <input name="text[0]" type="text" /><br />
  61. <input name="skiped" type="text" skip_form_save="true" /><br />
  62. <input name="pass" type="password" /><br />
  63. <input name="radio" type="radio" /><br />
  64. <input name="check" type="checkbox" /><br />
  65. <textarea name="txt"></textarea><br />
  66. <select name="sel">
  67. <option selected="selected">Test1</option>
  68. <option>Test2</option>
  69. <option>Test3</option>
  70. </select><br />
  71. <input type="submit" onclick="saveFormSession(this.form)" value="Save form" />&nbsp;
  72. <input type="button" onclick="restoreFormSession(this.form)" value="Restore form" />
  73. </form>
  74. </body>
  75. </html>


 
На OnClick кнопки отправки формы - вешаем сохранение.
Восстановление для тестовых целей запускается вручную по нажатию на кнопку(опять же OnClick), но для рабочей ситуации, разумно будет делать это в body -> OnLoad.

Найдено на forum.vingrad.ru.
Тестировалось на: IE 6.0 SP2, Mozilla FF 1.5, Opera 8.5

+добавить реализацию