我似乎对本地存储一无所知。我想通过切换类来设置一种最喜欢一组 div 中的任何 div 的方式。我可以让toggleClass在单个div上工作并保存,但localStorage将所有div保存为收藏夹,而不仅仅是设置了toggleClass的div。显然我错过了一些东西。
本地存储代码:
if (typeof (localStorage) == 'undefined') {
document.getElementById("result").innerHTML = 'Your browser does not support HTML5 localStorage. Try upgrading.';
} else {
if (localStorage.getItem("fav") != null) {
getFav = localStorage.fav;
$(".item").addClass('favorites');
}
}
$(document).ready(function () {
$('.btn').on('click', function () {
getFav = localStorage.fav;
//$(".item").removeClass('favorites');
//localStorage.removeItem('background');
$(this).closest(".item").toggleClass('favorites');
if ($(this).closest(".item").hasClass('favorites')) {
localStorage.setItem('fav', 'favorites');
}else{
localStorage.removeItem('fav');
}
});
});
问题出在
$(".item").addClass('favorites');
它将类添加到所有 .items 中,显然不应该。
如有任何帮助,我们将不胜感激!
最佳答案
如果其他答案问题还不够,这里有一个解决方案,它允许您拥有多个在重新加载后保持状态的 div 而不是只有一个。
http://codepen.io/anon/pen/WvmEbX
if (typeof(localStorage) == 'undefined') {
document.getElementById("result").innerHTML =
'Your browser does not support HTML5 localStorage. Try upgrading.';
} else {
$(".item").each(function(i, el) {
if (localStorage['fav' + i] == 'favorites') {
$(this).addClass('favorites');
}
});
}
$(document).ready(function() {
$('.btn').on('click', function() {
var $item = $(this).closest('.item');
var index = $('.item').index($item);
$item.toggleClass('favorites');
if ($item.hasClass('favorites')) {
localStorage.setItem('fav' + index, 'favorites');
} else {
localStorage.removeItem('fav' + index);
}
});
});
关于javascript - localStorage,使用toggleClass保存类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31910635/