Suite à la vidéo "Tutoriel Vidéo jQuery : localStorage", je mets le code suivant à disposition. Il intègre le gestion des "checkbox", des "radio" et des "select". Note : J'utilise la fonction "change" à la place de "keyup" pour intégrer les "checkbox" et les "radio" dans une et même fonction. "Keyup" ne fonctionne pas pour ceux-ci. Libre à vous de faire différentes fonctions par la suite. [code] $(document).ready(function () { $.fn.extend({ /*########################## # # Fonction : formBackup # Description : Permet de sauvegarder les données d'un formulaire en local (F5, Crash explorer, ..) # ###########################*/ formBackup : function(){ var storage = localStorage; if(!storage){ return false; } var itemNom = "formBackup"; var forms = this; var datas = {}; var ls = false; datas.href = window.location.href; /***************** * On récupère les infos du storage pour remplir les champs *****************/ if(storage[itemNom]){ ls = JSON.parse(storage[itemNom]); if(ls.href == datas.href){ for(var id in ls){ if(id != 'href'){ // Input CheckBox ou Radio if(ls[id] == "onChecked") { $('#'+id).attr("checked","checked"); datas[id] = "onChecked"; // Input Text, Textarea, Select }else{ $('#'+id).val(ls[id]); datas[id] = ls[id]; } } } } } /***************** * On place la valeur des différents champs dans storage *****************/ forms.find('input,textarea,select').change(function(e){ // Input CheckBox if(this.type == "checkbox") { if(!this.checked){ storage.removeItem(itemNom[$(this).attr('id')]); delete datas[$(this).attr('id')]; }else{ datas[$(this).attr('id')] = $(this).val() + "Checked"; } // Input Radio }else if(this.type == "radio"){ var idRadio = $(this).attr('id'); var idname = $(this).attr('name') datas[idRadio] = $(this).val() + "Checked"; // Input Radio de même catégorie $('input[name='+idname+']').each(function(){ if($(this).attr('id') != idRadio){ storage.removeItem(itemNom[$(this).attr('id')]); delete datas[$(this).attr('id')]; } }) // Input Text, TextArea, Select }else{ datas[$(this).attr('id')] = $(this).val(); } // Sauvegarde storage.setItem(itemNom, JSON.stringify(datas)); }) /***************** * On supprime les valeurs stockées dans storage *****************/ $('#recommencer').click(function(e){ storage.removeItem(itemNom); }) return true; } }) /* * On applique la fonction sur les formulaires */ $('form').formBackup(); }) [/code] Bien à vous. Édition du 03/05/2012 : Modification de la ligne 49 pour utiliser les champs "select" **
fredob
