Question

我希望能够将一个项目添加到列表中，并在重新加载页面时查看它。我不确定该怎么做。我不需要将其存储在数据库中或任何其他内容，我希望它出现在屏幕上，直到我手动删除列表项为止。这可能吗？

我认为这将保留在共享点上，并与多个用户添加和编辑内容一起使用，但是当我执行该步骤时，如果与当前问题有所不同，我可能还需要其他帮助。 LI信息的保存。

$("ul").on("click", "li", function(){
	$(this).toggleClass("completed");
});


$("ul").on("click", "span", function(event){
	$(this).parent().fadeOut(500,function(){
		$(this).remove();
	});
	event.stopPropagation();
});

$("input[type='text']").keypress(function(event){
	if(event.which === 13){
		
		var name = $('#name').val();
		$('#name').val("");

		var number = $('#number').val();
		$('#number').val("");

		var exception = $('#exception').val();
		$('#exception').val("");

		var date = $('#date').val();
		$('#date').val("");

		
		
		$("ul").append("<li><span><i class='fa fa-trash'></i></span> " + name + " | " + number +  " | " + exception + " | " + date + "</li>")
	}
});

$(".fa-plus").click(function(){
	$("input[type='text']").fadeToggle();
});

body {
	font-family: Roboto;
  background: -webkit-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* IE10 */
  background:      -o-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* Opera 11.10+ */
  background:         linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* W3C */
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}


h1 {
	background: #2980b9;
	color: white;
	margin: 0;
	padding: 10px 20px;
	text-transform: uppercase;
	font-size: 24px;
	font-weight: normal;
}

.fa-plus {
	float: right;
}




li {
	background: #fff;
	height: 40px;
	line-height: 40px;
	color: #666;
}

li:nth-child(2n){
	background: #f7f7f7;
}

span {
	background: #e74c3c;
	height: 40px;
	margin-right: 20px;
	text-align: center;
	color: white;
	width: 0;
	display: inline-block;
	transition: 0.2s linear;
	opacity: 0;
}

li:hover span {
	width: 40px;
	opacity: 1.0;
}

input {
	font-size: 18px;
	color: #2980b9;
	background-color: #f7f7f7;
	width: 100%;
	padding: 13px 13px 13px 20px;
	box-sizing: border-box;
	border: 3px solid rgba(0,0,0,0);
}

input:focus{
	background: #fff;
	border: 3px solid #2980b9;
	outline: none;
}

#container {
	width: 360px;
	margin: 100px auto;
	background: #f7f7f7;
	box-shadow: 0 0 3px rgba(0,0,0, 0.1);
}

.completed {
	color: gray;
	text-decoration: line-through;
}

<!DOCTYPE html>
<html>
<head>
	<title>Exceptions</title>
	<link rel="stylesheet" type="text/css" href="assets/css/todos.css">
	<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,500' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
	<script type="text/javascript" src="assets/js/lib/jquery-2.1.4.min.js"></script>
</head>
<body>

<div id="container">
	<h1>2223A Exceptions <i class="fa fa-plus"></i></h1>
	<input id="name" type="text" placeholder="Employee Name:">
	<input id="number" type="text" placeholder="Employee Number:">
	<input id="exception" type="text" placeholder="Employee Exception:">
	<input id="date" type="text" placeholder="Employee Date:">
	<ul>
		<li><span><i class="fa fa-trash"></i></span> #303974 | R. Roberts | SN | 6/25 - 6/27</li>
		<li><span><i class="fa fa-trash"></i></span> #303354 | B. Smith | SN | 6/15 & 6/27</li>
		<li><span><i class="fa fa-trash"></i></span> #328937 | K. Stull | NO | 6/26</li>
	</ul>
</div>

<script type="text/javascript" src="assets/js/todos.js"></script>
</body>
</html>

Answer 1

写得很好的问题。

更改

$("ul").append("<li><span><i class='fa fa-trash'></i></span> " + name + " | " + number +  " | " + exception + " | " + date + "</li>")

收件人

let li = "<li><span><i class='fa fa-trash'></i></span> " + name + " | " + number +  " | " + exception + " | " + date + "</li>";
localStorage.setItem('li', localStorage.getItem('li') + li);
$("ul").append(li);

localStorage是一个API，可让您在浏览器中存储数据。我在这里所做的全部工作都是将li存储为li的串联字符串的一部分。然后，像以前一样将新的li放在页面上。

现在，您的下一个任务是在页面加载时从localStorage检索li。所以这样的事情会起作用：

// assuming document.ready
let lis = localStorage.getItem('li');
$("ul").append(lis);

那应该让你很亲近。

编辑：我已经修改了您的jsFiddle以实现此目标（添加一个新项）。您可以在这里找到它：https://jsfiddle.net/tsbm02hd/

Answer 2

您确实可以使用localstorage，也可以使用JavaScript Cookie管理器。唯一的缺点是用户具有一定的控制权，因为他将能够清除浏览器并因此清除其本地存储和/或Cookie ...

我仍然相信，对于此类事情，最好使用API调用并将此数据保存在服务器端。...

我可以刷新此页面而不丢失LI内容吗？

2 个答案: