How to store data retrieving from server with ajax to store on the page even when click on the back button using laravel 5.4?

Please I'm very new to laravel. I've being searching online since 3 days ago now, but i don't seem get the solution i'm looking for.

I'm working on an online exam project. I'm trying to use ajax with laravel 5.4 to retrieve data from the server to display next question so that the page won't be reloaded when next button is clicked and I was able to achieve that with some tutorials.

Now, what I want is that when an answer is clicked and move to the next page, I want the answer to remain clicked when previous button is clicked to view the previous answered questions.

I've read this and tried to manipulate it with my code, but I'm not getting it since I'm not good at ajax.

How to call ajax again when user click back button to go back last webpage?

This is my controller part:

       {
       $id = preg_replace("#[^0-9a-z/\-]#", "", $id);

      if($unique_exam = Exam::where('id', $id)->get())
        {
        $users = User::where('id',   Auth::guard('student')->user()->owner_id)->get();
        $exam_questions = Question::where('exam_id', $id)->get();
        $question_points = Question::where('exam_id', $id)->sum('point');

        return view('user.student.examgo', compact('unique_exam', 'users', 'exam_questions', 'question_points'));
        }
    }

This is my ajax code:

    $(window).on('hashchange', function() {

    if (window.location.hash) {

        var page = window.location.hash.replace('#', '');

        if (page == Number.NaN || page <= 0) {

            return false;

        }else{

            getData(page);

        }

    }

});


$(document).ready(function()

{

    $(document).on('click', '.pagination a',function(event)

    {

        $('li').removeClass('active');

        $(this).parent('li').addClass('active');

        event.preventDefault();


        var myurl = $(this).attr('href');

        var page=$(this).attr('href').split('page=')[1];


        getData(page);

    });

});


function getData(page){

        $.ajax(

        {

            url: '?page=' + page,

            type: "get",

            datatype: "html",

            async: true,

            cache: false,


        })

        .done(function(data)

        {

            $("#item-lists").empty().html(data);

            location.hash = page;

        })

        .fail(function(jqXHR, ajaxOptions, thrownError)

        {

              alert('No response from server');

        });

}

This is my view page code:

  @foreach( $questions as $question )

      <div class="carousel-inner"  style="height:100%">

         <div class="item active">

        <h4></h4>
          <p><input type="radio" name="1"> </p>
          <p><input type="radio" name="1"> </p>
          <p><input type="radio" name="1"> </p>
              <p><input type="radio" name="1"> </p>


    </div>
  </div>
   @endforeach

{!! $questions->render() !!}

Please what I really want is that I want the radio button to remain clicked when the when previous button is clicked to view the previous answered questions. An explanatory answer will be highly appreciated. Thanks in anticipation.

via Chebli Mohamed