你好我有一个很大的问题，我试图解决，但它只是无法正常工作。当您点击卡片.card-1）时，我希望该卡片为fadeOut，并且该卡片会保存在localStorage中。
该功能有效，但未保存在localStorage中，我做错了什么，我尝试了很多不同的东西？
似乎getItem有效，因为该功能会运行，但当我刷新应用时，卡仍然存在。我使用带有类卡1的部分而不是输入
<section class="card-1"></section>
我很感谢你的帮助
$(".card-1").click(function() {
var storage = $(".card-1").val;
if (localStorage.getItem("local", storage)) {
$('.card-1').fadeOut();
localStorage.setItem("local", storage);
}
});
答案 0 :(得分：2)
＆＃34;我的主要目标是即使刷新页面后该卡也会显示为fadeOut。我似乎无法让它发挥作用。＆＃34;
这个问题并不明显，但现在已经解决了，首先我应该告诉你localStorage因为它与你的情况有关：
localStorage无限期地将数据存储为字符串（直到用户使用clear()完全清除它，或removeItem()方法，或通过使用{{覆盖现有密钥1}}和一个新值，或超过2到10MB的限制。
setItem()存储限制是每个域。例如，site-x.com有2MB数据，剩余8MB，site-z.net有4MB存储数据，剩下6MB。此外，不为任何其他域共享为一个域存储的内容。
作为一种有益的副作用＆＃34;，localStorage中的数据在域的所有页面之间共享。
BTW有两件事需要指出 OP （ O 严格 P ost ）：
localStorage从语法上讲，它是错误的，它应该是以下（假设var storage = $(".card-1").val;
是一个表单控件，如.card-1或<input>）：
<textarea>的（）
其次，var storage = $(".card-1").val是一个块元素而不是表单控件，因此<section>方法和val()属性永远不会起作用。知道元素是否为表单控件的最简单方法是它可以具有.value属性。
此演示无法在此站点上运行，因为localStorage已被阻止。见 PLUNKER 1 和 PLUNKER 2
value
<小时/>
您的语法错误<!DOCTYPE html>
<html>
<head>
<style>
body {
font: 400 16px/1.5 Verdana;
}
[type=checkbox] {
display: none;
}
#chx0:checked~.card-0 {
display: none;
}
#chx1:checked~.card-1 {
display: none;
}
#chx2:checked~.card-2 {
display: none;
}
label,
input {
font-family: Consolas;
font-variant: small-caps;
font-size: 20px;
display: block;
cursor: pointer;
}
label {
min-height: 30px;
background: rgba(0, 200, 0, 0.4);
text-align: center;
padding-top: 8px;
}
code {
font-family: Courier New;
background: rgba(121, 45, 121, 0.2);
}
kbd {
border: 2px outset grey;
border-radius: 8px;
padding: 2px 4px;
font-family: Verdana;
}
footer {
height: 90px;
}
summary h3 {
display: inline-block;
cursor: pointer;
margin: 10px auto;
}
</style>
</head>
<body>
<details>
<summary>
<h3>CSS</h3>
</summary>
<ul>
<li>Click one of the <code><fieldset>s</code> and it disappears because...
<ul>
<li>
there's a nested <code><label> [for="ID-of-Input"]</code> linked to an...
</li>
<li>
invisible <code><input id="ID-of-Input"> [type=checkbox]</code>
</li>
</ul>
</li>
<li>
A click on a <code><label></code> will be a click on its linked input
</li>
<li>
By using the pseudo-class selector <code>:checked</code> and the general sibling combinator <code>~</code> the "younger" siblings are now subject to a switch that can manipulate CSS dramatically around them and on them. In the demo, each invisible
checkbox will hide a specific <code>.card</code>.
</li>
</ul>
</details>
<details>
<summary>
<h3>jQuery</h3>
</summary>
<ul>
<li>
Basically CSS is used to remove the targets and jQuery is used tp keep the current state of certain elements persistant.
</li>
<li>
In the demo an <code>each()</code> will loop through the checkbox <code>#id</code>s and pass them through <code>getData()</code> function as keys. If any values of '1' are found, the checkbox <code>#id</code> that corresponds with the key gets
checked.
</li>
</ul>
</details>
<h3>Instructions</h3>
<p><kbd>Reload</kbd> this page and the cards that are gone continue to be so. In order to remove the data from <code>localStorage</code>, click the <kbd>Clear</kbd> button.</p>
<hr>
<input id='chx0' class='chx' type='checkbox'>
<input id='chx1' class='chx' type='checkbox'>
<input id='chx2' class='chx' type='checkbox'>
<fieldset class='card-0 card' data-id='chx0'>
<label for='chx0'>Card 0</label>
</fieldset>
<hr>
<fieldset class='card-1 card' data-id='chx1'>
<label for='chx1'>Card 1</label>
</fieldset>
<hr>
<fieldset class='card-2 card' data-id='chx2'>
<label for='chx2'>Card 2</label>
</fieldset>
<input class='reload' type='button' value='Reload' style='float:left; margin:5px 10px 20px 0; width:20ch;background:cyan;color:#000'>
<input class='clear' type='button' value='Clear' style='float:right; margin:5px 10px 20px 0; width:20ch;background:tomato;color:#fff'>
<footer> </footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var data;
$('.chx').each(function(i, c) {
var key = this.id;
data = getData(key);
console.log(data);
if (data === '1') {
this.checked = true;
}
});
$(".chx").on('click', function() {
var key = this.id;
var val = this.checked ? '1' : '0';
setData(key, val);
});
function getData(key) {
data = localStorage.getItem(key);
if (data === null) {
return false;
} else {
return data;
}
}
function setData(key, value) {
if (key === undefined || value === undefined) {
return false;
} else {
localStorage.setItem(key, value);
return true;
}
}
$('.reload').on('click', function() {
location.reload(true);
});
$('.clear').on('click', function() {
localStorage.clear();
});
</script>
</body>
</html>应为$(".card-1").val;。除此之外，我还没有调试其余部分。不要使用点击事件我只能假设是$(".card-1").val()（测试按钮的价值会不方便），使用更改或输入事件（我建议更改）如果处理<input>）。以下演示简单使用localStorage。
此演示无法在此网站上运行，因为localStorage已被阻止。见 PLUNKER 1 和 PLUNKER 2
localStoragevar data = getData('card-1');
console.log(data);
if (data) {
$('.card-1').val(data);
}
$(".card-1").on('change', function() {
var storage = $(this).val();
setData.call(this, 'card-1', storage);
$(this).fadeOut();
});
function getData(key) {
var data = localStorage.getItem(key);
if (data === null) {
return false;
} else {
return data;
}
}
function setData(key, value) {
if (key === undefined || value === undefined) {
return false;
} else {
localStorage.setItem(key, value);
return true;
}
}
$('.view').val('card-1: ' + data);
$('.clear').on('click', function() {
localStorage.clear();
})
答案 1 :(得分：0)
首先，您只想在点击时淡出卡片（每个部分由HTML标签表示），所以
$("section").click(function() {
var card = $(this); //get the card that is clicked
var storage = card.attr("class"); //get the class name of this card
card.fadeOut(); //hide it
localStorage.setItem("local", storage); //save the value
});
接下来，您希望页面检查是否有任何存储值，以便您可以隐藏卡片。
$(function() { //short hand for $(document).ready()
var value = localStorage.getItem("local"); //get the value from local storage with the same key, which is "local"
if (value) { //if there is a value stored previously
$("section." + value).fadeOut(); //get back the same card and hide it
}
});