how to save data in localstorage for further use?

Question

how can i save the data in localstorage each keyup and when i search again data will show from localstorage, this time do not sent any request for data from db.

$(document).ready(function () {
  $('#input_id').keyup(function (e) {
    var name = $('#input_id').val();
    var data = name.trim();
    var msg = $('#result');
    msg.empty();

    $.ajax({
      url: "search.php",
      method: "post",
      data: { input: data },
      dataType: "",
      success: function (name) {
      console.log(name);
      var getdata = JSON.parse(name);
      var z = getdata.length;
      for (var j = 0; j < z; j++) {
        if (getdata[j].surname) {
          var show_result = '<span id="result">' + getdata[j].firstname + " " + getdata[j].surname + '</span>';
          msg.append(show_result);
        } else {
          var show_result2 = '<span id="result">' + getdata[j].firstname + '</span>';
          msg.append(show_result2);
        }
      }
    }
  });
});

Answer 1

As discussed in comments:

$('#input_id').keyup(function (e) {
  var name = $('#input_id').val();
  var data = name.trim();
  var msg = $('#result');
  msg.empty();
  var localdata = localStorage.getItem('my_key'); 

  if (!localdata || localdata !== data) {
    $.ajax({
      url: "search.php",
      method: "post",
      data: { input: data },
      dataType: "",
      success: function (name) {
        localStorage.setItem('my_key', name);
        console.log(name);
        var getdata = JSON.parse(name);
        var z = getdata.length;
        for (var j = 0; j < z; j++) {
          if (getdata[j].surname) {
            var show_result = '<span id="result">' + getdata[j].firstname + " " + getdata[j].surname + '</span>';
            msg.append(show_result);
          } else {
            var show_result2 = '<span id="result">' + getdata[j].firstname + '</span>';
            msg.append(show_result2);
          }
       }
    }
  } else {
     // do something with local data
  }
...