CODEWITHSUNDEEP
javascriptjqueryhtml
Jake
Jake

Reputation: 23

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 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>

Upvotes: 2

Views: 62

Answers (2)

Randy Casburn
Randy Casburn

Reputation: 14165

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/

Upvotes: 1

Bojoer
Bojoer

Reputation: 948

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....

Upvotes: 0

Related Questions