使用jQuery在sessionStorage中保存动态内容

Question

我在CakePHP中有一个带有动态div的表单，我在其中放置了通过AJAX检索的动态内容。到目前为止一切都很好，但是当存在验证错误时，我会丢失已经通过AJAX检索到的动态内容。

我通过使用jQuery在sessionStorage中保存动态内容来解决这个问题，但我想知道这是最好的解决方案还是其他解决方案，如果我可以使用CakePHP CacheHelper呢？

添加视图

<div class="row">
<div class="large-12 columns" >
<div class="adstitle">
    <label>
        <?php echo __('Informations Annonce');?>  </label> 
         <a class="tooltipicon" href="#"> 
            <i class="fa fa-info-circle tooltipicon"></i>
            <span class="classic">
                <?php echo __('Essayez d\'introduire des informations correctes et claires sur votre annonce') ?>
            </span>
         </a>


</div>

<br>
<div class="new_annonce" >
   <?php

    echo $this->Form->create(false,array('url'=>array('action'=>'add')
      ,'class'=>"form-horizontal",'id'=>'form','type'=>'file'));  ?>



        <div class="row">
          <div class="large-3 columns">
                <label for="right-label" class="right">
                  <?php echo __('Titre')?>
                </label>

              </div>
              <div class="large-4 columns">
              <?php
                echo $this->Form->input('titre',
                array('label'=>false,
                'type'=>'text',
                'required'=>true,
                'placeholder'=>__('Titre De Votre Annonce'),
                'minlength'=>10,
                'maxlength'=>100,               
                'div'=>false
                ));
              ?>
             </div>
             <div class="large-5 columns">
                  <label for="right-label" class="left inline error">
                    <?php 
                    if(isset($errors['titre'])){
                      echo $errors['titre'][0];
                    }                    
                    ?>
                  </label>
             </div>
        </div>

<div id="type_annonce_area">

        <div class="row">
          <div class="large-3 columns">
                <label for="right-label" class="right">
                  <?php echo __('Type Annonce')?>
                </label>
          </div>
          <div class="large-6 end columns">
          <?php
            echo $this->Form->input('type_annonce_id',
            array(
            'type'=>'radio',  
            'legend' => false, 
             'separator'=>'<br>',   
            'class'=>'typeAnnonce' ,
            'label'=>false,   
            'required'=>true,                                  
            'div'=>false,            
            'options'=>$typeAnnonces   
            ));
          ?>
          </div>
        </div>
        <div class="row">
              <div class="large-12 columns">
                      <label for="right-label" class="left inline error">
                        <?php 
                        if(isset($errors['type_annonce_id'])){
                          echo $errors['type_annonce_id'][0];
                        }                    
                        ?>
                      </label>
              </div>
        </div>


</div>

        <div class="row">
          <div class="large-3 columns">
                <label for="right-label" class="right">
                  <?php echo __('Ville')?>
                </label>
              </div>
          <div class="large-4 columns">
          <?php
            echo $this->Form->input('ville_id',
            array('label'=>false,
            'type'=>'select',             
            'required'=>true,
            'empty'=>__('**Choisir une ville**'),                         
            'div'=>false
            ));
          ?>
          </div>
          <div class="large-5 columns">
                  <label for="right-label" class="left inline error">
                    <?php 
                    if(isset($errors['ville'])){
                      echo $errors['ville'][0];
                    }                    
                    ?>
                  </label>
             </div>
        </div>

    <br>
        <div class="row">
          <div class="large-3 columns">
                <label for="right-label" class="right">
                  <?php echo __('Catégorie')?>
                </label>
              </div>
          <div class="large-4 columns">
          <?php
            echo $this->Form->input('categorie_id',
            array(
            'label'=>false,
            'type'=>'select',
            'required'=>true, 
            'id'=> 'categorie_id_add',           
            'empty'=>__('** Choisir une catégorie **'),                         
            'div'=>false
            ));
          ?>
          </div>
          <div class="large-5 columns">
                  <label for="right-label" class="left inline error">
                    <?php 
                    if(isset($errors['categorie_id'])){
                      echo $errors['categorie_id'][0];
                    }                    
                    ?>
                  </label>
             </div>
        </div>

     <br>

    <div id = 'ads_content'>
      <!-- ici on met le contenu dynamique suivant la catégorie choisie -->    

    </div>



        <div class="row">
          <div class="large-3 columns">
                <label for="right-label" class="right">
                  <?php echo __('Description')?>
                </label>
          </div>
          <div class="large-7 columns">
          <?php
            echo $this->Form->input('description',
            array('label'=>false,
            'type'=>'textarea', 
            'required'=>true,
            'rows'=>10,            
            'placeholder'=>__('Description de votre Annonce'),
            'minlength'=>20,
            'maxlength'=>500,                 
            'div'=>false
            ));
          ?>
          </div>
          <div class="large-2 columns">
                  <label for="right-label" class="left inline error">
                    <?php 
                    if(isset($errors['description'])){
                      echo $errors['description'][0];
                    }                    
                    ?>
                  </label>
          </div>
        </div>

    <br>


        <div class="row">
          <div class="large-3 columns">
                <label for="right-label" class="right">
                  <?php echo __('Prix')?>
                </label>
              </div>
          <div class="large-4 columns">
          <?php
            echo $this->Form->input('prix',
            array('label'=>false,
            'type'=>'text',             
            'placeholder'=>__('Prix De Votre Annonce'),              
            'div'=>false
            ));
          ?>
          </div>
          <div class="large-5 columns">
                  <label for="right-label" class="left inline error">
                     <?php 
                    if(isset($errors['prix'])){
                      echo $errors['prix'][0];
                    }                    
                    ?>
                  </label>
          </div>
        </div>



        <div class="row">
          <div class="large-3 columns">
                <label for="right-label" class="right">
                  <?php echo __('Telephone')?>
                </label>
              </div>
          <div class="large-4 columns">
          <?php
            echo $this->Form->input('telephone',
            array('label'=>false,
            'type'=>'text',             
            'placeholder'=>__('Votre Nr TPH'),               
            'div'=>false
            ));
          ?>
          </div>
          <div class="large-5 columns">
              <label for="right-label" class="left inline error">
                <?php 
                    if(isset($errors['telephone'])){
                      echo $errors['telephone'][0];
                    }                    
                    ?>
              </label>
          </div>
        </div>

    <!-- Zone d'uploade des fichiers-->


              <div class="row">
                  <div id="photoarea" >
                    <div class="large-4 columns">                       
                       <div class="fileinputs">                 
                            <input type="file" class="file" id="inputfile" multiple="true"/>
                            <div class="fakefile">
                            <input id="surinput"value="Choisir, Glisser vos images" readonly/> 
                            </div>
                        </div>
                    </div> 
                    <!-- Zone afichage images uploadeés --> 
                    <div class="large-1 columns" >
                      <div class="th" id="divloader" hidden>
                             <?php echo $this->Html->image('loader.gif')?>
                      </div>     
                    </div>
                    <div class="large-7 columns" id="photos">


                    </div>
                    <!-- Zone afichage images uploadeés -->   
              </div>
            </div>

     <!-- Zone d'uploade des fichiers-->  
          <br>

    <!-- login area -->
    <?php  if(!AuthComponent::user('id')): ?>
      <div id='loginarea'>
       <?php  echo $this->element('insc_add_annonce');?> 
      </div>
     <?php endif; ?>   
    <br>

    <!-- end login area-->  


        <div class="row submit-area">
                <div class="large-8 columns">
                    <h6 class="right">
                        <?php echo __('En cliquant sur le bouton, vous acceptez les'.' '.$this->html->link(__('Conditions Générales'),array('controller'=>'pages','action'=>'conditions'),array('target'=>'_blank')).' '.'du site Rabhin.ma');  ?>
                    </h6>
                </div>
                <div class="large-4 columns ">
                    <?php echo $this->Form->end(array(                  
                    'label' => __('Déposer Votre Annonce'),
                    'class'=>'button expand',
                    'div'=>false
                )); ?>
                </div> 
        </div>     

 </div>
</div>
</div>

> jquery script
> 
> $("#categorie_id_add").on('change',change_categories);
>         if(sessionStorage.getItem('categorie_id_add')){
>           $("#categorie_id_add").val(sessionStorage.getItem('categorie_id_add'));
>         }




 function change_categories(e){ 
            /*enregistrement en local de la categorie choisi*/
            sessionStorage.setItem('categorie_id_add',$("#categorie_id_add").val());

            var id = $(this).context.value;
            $("#ads_content").html("");
            switch (id) {
                case '1':
              var action = "<?php echo $this->Html->url(array('controller'=>'vehicules','action'=>'add'));?>";              
              type_annonce();
              $("#form").attr('action',action);
              sessionStorage.setItem('action',action); 
              $("#ads_content").load(action,function(data){sessionStorage.setItem('ads_content',data);});
               break;
              case '2':
              var action = "<?php echo $this->Html->url(array('controller'=>'voitures','action'=>'add'));?>";              
              type_annonce();
              $("#form").attr('action',action);
              sessionStorage.setItem('action',action); 
              $("#ads_content").load(action,function(data){sessionStorage.setItem('ads_content',data);});
               break;               
                case '3' :
                var action = "<?php echo $this->Html->url(array('controller'=>'motos','action'=>'add'));?>";              
                type_annonce();
                $("#form").attr('action',action);
                sessionStorage.setItem('action',action);
               $("#ads_content").load(action, function(data){sessionStorage.setItem('ads_content',data);});
               break;
               case '4' :
               var action = "<?php echo $this->Html->url(array('controller'=>'camions','action'=>'add'));?>";              
               type_annonce();
                $("#form").attr('action',action);
                sessionStorage.setItem('action',action);
               $("#ads_content").load(action, function(data){sessionStorage.setItem('ads_content',data);});
               break;
}