使用html jQuery保存到本地存储

你好，我有一个大问题，我已经试图解决，但它只是不工作。当您单击一张卡（

.card-1

）时，我希望该卡淡出，并保存在

本地存储中

该函数可以工作，但未保存在
localStorage
中，我做错了什么，我尝试了许多不同的方法

似乎
getItem
起作用是因为函数运行，但当我刷新应用程序时，卡仍然存在。我使用带有类别卡片-1的部分，而不是输入

<section class="card-1"></section>

首先，您只需要在单击时淡出卡（每个卡由一个节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
  }
});

首先，您只需要在单击时淡出卡（每个卡由一个节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
  }
});

更新
演示1
“我的主要目标是，即使在你刷新页面后，卡片也会消失。我似乎不可能让它工作。”

这在问题中并不明显，但现在已经澄清了，首先我应该告诉您有关
localStorage
的信息，因为它与您的情况有关：


localStorage
无限期地将数据存储为字符串（直到用户使用
clear（）
彻底清除数据，或使用
removietem（）
方法，或使用
setItem（）
和新值覆盖现有键，或超过2到10MB的限制）

localStorage
存储限制为每个域。例如，site-x.com有2MB数据，剩余8MB；site-z.net有4MB存储数据，剩余6MB。此外，为一个域存储的内容不会与任何其他域共享

作为一种有益的“副作用，
localStorage
中的数据在域的所有页面之间共享


顺便说一句，关于OP（O原始post），有两件事需要指出：

从语法上讲，它是错误的，应该是以下内容（假设
.card-1
是一个类似
或
的表单控件）：

var存储=$（“.card-1”）.val
（）

其次，
是块元素，而不是表单控件，因此
val（）
方法和
.value
属性永远不会工作。要知道元素是否是表单控件，最简单的方法是它可以有一个
值
属性

此演示无法在此网站上运行，因为localStorage已被阻止。查看此和

演示1


身体{
字体：40016px/1.5verdana；
}
[类型=复选框]{
显示：无；
}
#chx0:选中~.card-0{
显示：无；
}
#chx1:选中~.卡-1{
显示：无；
}
#chx2：选中~.卡-2{
显示：无；
}
标签，
输入{
字体系列：Consolas；
字体变体：小大写字母；
字体大小：20px；
显示：块；
光标：指针；
}
标签{
最小高度：30px；
背景：rgba（0,200,0,0.4）；
文本对齐：居中；
填充顶部：8px；
}
代码{
字体系列：信使新；
背景：rgba（121,45,121,0.2）；
}
kbd{
边框：2件灰色；
边界半径：8px；
填充物：2px4px；
字体系列：Verdana；
}
页脚{
高度：90px；
}
总结h3{
显示：内联块；
光标：指针；
利润率：10px自动；
}
CSS

单击其中一个
字段集
，它将消失，因为。。。


有一个嵌套的
标签[for=“ID of Input”]
链接到。。。


不可见的
input id=“输入的id”[type=checkbox]




单击
标签
即单击其链接输入


通过使用伪类选择器
：选中的
和通用同级组合器
~
，“较年轻的”同级现在受到一个开关的约束，该开关可以在他们周围和他们身上戏剧性地操纵CSS。在演示中，每个都是不可见的
复选框将隐藏特定的
.card
。


jQuery


基本上，CSS用于删除目标，jQuery用于保持某些元素的当前状态的持久性。


在演示中，
each（）
将循环通过复选框
#id
s，并将它们作为键传递给
getData（）
函数。如果找到“1”的任何值，则与该键对应的复选框
#id
将
选中的。


说明书
重新加载此页面，消失的卡片将继续如此。要从
localStorage
中删除数据，请单击清除按钮


卡0

卡1

卡2
var数据；
$（'.chx'）。每个（函数（i，c）{
var key=this.id；
数据=获取数据（键）；
控制台日志（数据）；
如果（数据=='1'）{
this.checked=true；
}
});
$（“.chx”）。在（'click'，function（）上{
var key=this.id；
var val=this.checked？'1'：'0'；
setData（键，val）；
});
函数getData（键）{
data=localStorage.getItem（键）；
如果（数据===null）{
返回false；
}否则{
返回数据；
}
}
函数设置数据（键、值）{
如果（键===未定义| |值===未定义）{
返回false；
}否则{
L