Как реализовать LocalStorage?

215

17 ноября 2018, 08:30

Как в нижеуказанном коде реализовать LocalStorage? Чтобы значения не обнулялись при обновлении страницы. Код - jsfiddle

$("#delivery-now").on('click', function(e) { 
  if (!$('#delivery-now').hasClass('active')) { 
    $(this).toggleClass('active', true); 
    $("#delivery-time").removeClass('active'); 
  } 
}); 
$("#delivery-time").on('click', function(e) { 
  if (!$('#delivery-time').hasClass('active')) { 
    $(this).toggleClass('active', true); 
    $("#delivery-now").removeClass('active'); 
  } 
});

.active { 
  border: 3px red solid; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div> 
  <label>Когда доставить</label> 
  <div> 
    <input id="delivery-now" class="active" type="button" value="Доставить сейчас"> 
  </div> 
  <div> 
    <input id="delivery-time" type="button" value="Доставить ко времени"> 
  </div> 
</div>

Answer 1

В конце обоих обработчиков:

localStorage.setItem("activeButton", $(".active").attr("id"));

На загрузке страницы:

var activeId = localStorage.getItem("activeButton");
if (activeId) {
  //$(".active").removeClass("active");
  //$("#" + activeId).addClass("active"); 
  // чтобы выполнялись действия по нажатию:
  $("#" + activeId).click();
}