Записать массив в LocalStorage

174

20 ноября 2018, 00:20

Как в нижеуказанном коде записать наличие значения в input'ах в sessionStorage (localStorage)? Сейчас сохраняется только последнее значение. Смотреть код на JSFiddle

<script>
    $('#floor, #entrance, #apartment, #intercom').on('blur', function(e) {
      if ($(this).val()) {
        $(this).next('.custom-placeholder').toggleClass('completed', true);
        sessionStorage.setItem("PlaceholderCompleted", $(this).attr("id"));
      } else {
        $(this).next('.custom-placeholder').removeClass('completed');
      }
    });
    var PlaceholderCompletedId = sessionStorage.getItem("PlaceholderCompleted");
    if (PlaceholderCompletedId) {
      $("#" + PlaceholderCompletedId).siblings(".custom-placeholder").toggleClass('completed', true);
      console.log(PlaceholderCompletedId);
    }
</script>
<style>.completed {color: blue; font-weight:bold;}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div>
      <div>
        <input id="apartment" type="text">
        <div class="custom-placeholder">Кв./офис</div>
      </div>
      <div>
        <input id="floor" type="text">
        <div class="custom-placeholder">Этаж</div>
      </div>
      <div>
        <input id="entrance" type="text">
        <div class="custom-placeholder">Подъезд</div>
      </div>
      <div>
        <input id="intercom" type="text">
        <div class="custom-placeholder">Код домофона</div>
      </div>
    </div>

Answer 1

$('#floor, #entrance, #apartment, #intercom').on('blur', function(e) {
  $(this).siblings('.custom-placeholder').toggleClass('completed', $(this).val() != "");
  stored[$(this).attr("id")] = $(this).val() != "";
  sessionStorage.setItem("CompletedItems", stored);
});
var stored = sessionStorage.getItem("CompletedItems");
stored = stored? JSON.parse(stored) : {};
for (var key in stored) {
  $("#" + key).siblings(".custom-placeholder").toggleClass('completed', stored[key]);
  console.log(key, stored[key]);
}