Can I refresh this page without losing the LI content?

问题: I would like to be able to add an item to the list, and view it when I reload the page. I am not sure how to go about doing this. I do not need it stored in a database or a...

问题:

I would like to be able to add an item to the list, and view it when I reload the page. I am not sure how to go about doing this. I do not need it stored in a database or anything, I would just like it to be there on screen until I manually delete the list item. Is this possible?

I believe this would be kept on sharepoint, and used with multiple users adding and editing the content, but when I get to that step, I may need additional help with that as well, if that makes any difference to the current question of keeping the LI information.

$("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>


回答1:

Well written question.

Change

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

To

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 is an API that allows you to store data in the browser. All I have done here is stored the li as part of a concatenated string of lis. Then place the new li on the page the way you did before.

Now, your next task is the retrieve the lis from localStorage upon page load. So something like this will work:

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

That should get you very close.

EDIT: I've modified your jsFiddle to accomplish this goal (adding a new item). You can find it here: https://jsfiddle.net/tsbm02hd/


回答2:

U can indeed use localstorage or you can use JavaScript Cookie manager for this. Only downside is that the user has some control since he would bve able to clear his browser and therefor his localstorage and/or Cookies...

I still believe for things like this it is best to use an API call and save this data on the server side....

  • 发表于 2019-07-04 23:23
  • 阅读 ( 191 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除