[Solved] Window.localStorage JavaScript

by


You can use a listener to check if the radio is changed and then use an if to check the value and then define the image, description, etc…
Here I used a very basic and general jQuery selector input[type="radio"], you can use a class to be more specific if you want.

There’s a function called AdjustSelected, it makes all adjustments, changing image, title, etc… you can call it when the page loads, passing the value that comes from the localStorage, to adjust everything right n the loading of the page.

AdjustSelected = function(valSelected){  
  if (valSelected == 'wolf'){
    $('#t1').text('The Wolf');
    $('#animal_img').attr('src', 'PATH_TO_IMAGE');   
    $('#animal_img').attr('alt', 'wolf');
    $('#description').text('TEXT_YOU_WANT');
    
  }else if (valSelected == 'lemur'){
    $('#t1').text('The Lemur');
    $('#animal_img').attr('src', 'PATH_TO_IMAGE');
    $('#animal_img').attr('alt', 'lemur');
    $('#description').text('TEXT_YOU_WANT');
    
  }else if (valSelected == 'cat'){
    $('#t1').text('The Cat');
    $('#animal_img').attr('src', 'PATH_TO_IMAGE');
    $('#animal_img').attr('alt', 'cat');
    $('#description').text('TEXT_YOU_WANT');
    
  }else if (valSelected == 'raccoon'){
    $('#t1').text('The Raccoon');
    $('#animal_img').attr('src', 'PATH_TO_IMAGE');
    $('#animal_img').attr('alt', 'raccoon');
    $('#description').text('TEXT_YOU_WANT');    
  }
};

$("input[type="radio"]").on('change', function(){
  var valSelected = this.value;
  AdjustSelected(valSelected);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div>
    <input name="title" id="title1"  placeholder="Title ..." value=""/>
  </div>

  <div>
    <label for="animal" id='radioAnimals'>Animal choice: </label>
    <input type="radio" name="animal" value="wolf" checked> Wolf
    <input type="radio" name="animal" value="lemur"> Lemur
    <input type="radio" name="animal" value="cat"> Cat
    <input type="radio" name="animal" value="raccoon"> Raccoon
  </div>

  <div>
    <textarea name="description" rows="6" cols="60" value=""
      placeholder="Description ..."></textarea>
  </div>


</form>
<div>
  <button id="save">Save</button>
  <button type="reset">Reset</button>
</div>
<hr>

<div>
  <h3 id=t1>Title ...</h3>
  <div><img id=animal_img src="https://stackoverflow.com/questions/49607035/img/wolf.jpg" alt="wolf"></div>
  <div id=description>Description ...</div>

  </div>

  <div id="result">...</div>

solved Window.localStorage JavaScript