如何使用jquery在本地存储中存储类

How to store a class in local storage using jquery?

本文关键字：存储 何使用 jquery      更新时间：2023-09-26

>我有多个复选框。 单击它们的背景颜色会发生变化，并且它们的值将保存到本地存储中。但是，刷新时不会保存背景颜色。如何将背景颜色更改保存到本地存储？这是我正在使用的示例代码 https://jsfiddle.net/2m04prmz/2/

.HTML：

<input type="checkbox" class="faChkRnd" id="like9" ><label></label>

.CSS： 

.pincard-checked,  pin p {
    background-color: #2c3e50; color: #ffffff;transition: all 1s ease-out;border-top:2px solid #fff; 
}

JS：控制高亮显示 

$(document).ready(function(){
    $("#like").click(function () {
        $("#pin").toggleClass("pincard-checked");
    });
});

JS：将复选框值保存到本地存储

$('.faChkRnd').on('click', function() {
    var fav, favs = [];
    $('.faChkRnd').each(function() { // run through each of the checkboxes
        fav = {
            id: $(this).attr('id'),
            value: $(this).prop('checked')
        };
        favs.push(fav);
    });
    localStorage.setItem("favorites", JSON.stringify(favs));
});
$(document).ready(function() {
    var favorites = JSON.parse(localStorage.getItem('favorites'));
    if (!favorites.length) {
        return
    };
    console.debug(favorites);
    for (var i = 0; i < favorites.length; i++) {
        console.debug(favorites[i].value == 'on');
        $('#' + favorites[i].id).prop('checked', favorites[i].value);
    }
});

添加类，并在favorites[i].value true时选中复选框。

for (var i = 0; i < favorites.length; i++) {
    $('#' + favorites[i].id).prop('checked', favorites[i].value);
    if(favorites[i].value) {
        $('#' + favorites[i].id).closest(".pin").addClass("pincard-checked");
    }
}

为了更改复选框的背景，您可以使用以下代码，我还包含了本地存储解决方案。

$(document).ready(function() {
  $(".checkbox-wrapper label").on("click", function() {
    $(this).closest(".checkbox-wrapper").toggleClass('selected');
    var fav, favs = [];
    $('.faChkRnd').each(function() { // run through each of the checkboxes
      fav = {
        id: $(this).attr('id'),
        value: $(this).closest(".checkbox-wrapper").hasClass('selected')
      };
      favs.push(fav);
    });
    localStorage.setItem("favorites", JSON.stringify(favs));
  });
  var favorites = JSON.parse(localStorage.getItem('favorites'));
  if (favorites != null && favorites.length !== 0) {
    for (var i = 0; i < favorites.length; i++) {
      if (favorites[i].value == true) {
        $('#' + favorites[i].id).closest(".checkbox-wrapper").addClass("selected")
        $('#' + favorites[i].id).closest(".checkbox-wrapper faChkRnd").trigger("click");
      }
    }
  }
});
 .checkbox-wrapper-list li {
   display: inline;
 }
 .checkbox-wrapper-list li label {
   display: inline;
   padding-left: 50px;
   position: relative;
   left: -19px;
 }
 .checkbox-wrapper-list li span {
   position: relative;
   display: inline;
   width: 30px;
 }
 .checkbox-wrapper-list li span i {
   position: absolute;
   margin: auto;
   left: 0px;
   right: 0px;
   top: 0px;
   bottom: 0px;
   width: 14px;
   height: 14px;
   border: 1px solid #AEAEAE;
   border-radius: 2px;
   box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
   background-color: #fff;
 }
 .checkbox-wrapper-list li.selected i {
   background-color: #11a911;
   box-shadow: none;
   border-color: transparent;
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAABMSURBVAiZfc0xDkAAFIPhd2Kr1WRjcAExuIgzGUTIZ/AkImjSofnbNBAfHvzAHjOKNzhiQ42IDFXCDivaaxAJd0xYshT3QqBxqnxeHvhunpu23xnmAAAAAElFTkSuQmCC");
   background-repeat: no-repeat;
   background-position: center center;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="checkbox-wrapper-list">
  <li class="checkbox-wrapper">
    <span><i></i></span>
    <label for="like1">Like 1</label>
    <input name="your_checkbox[]" class="faChkRnd" id="like1" style="display: none;" type="checkbox">
  </li>
  <li class="checkbox-wrapper">
    <span><i></i></span>
    <label for="like2">Like 2</label>
    <input name="your_checkbox[]" class="faChkRnd" id="like2" style="display: none;" type="checkbox">
  </li>
  <li class="checkbox-wrapper">
    <span><i></i></span>
    <label for="like3">Like 3</label>
    <input name="your_checkbox[]" class="faChkRnd" id="like3" style="display: none;" type="checkbox">
  </li>
</ul>

继续黑客攻击！

相关文章：