用JavaScript创建cookie

时间:2019-03-16 04:46:07

标签: javascript html cookies

我正在尝试创建将两个cookie写入用户计算机的代码。 我要创建的第一个Cookie是名为“客户名称”的Cookie。处理订单时,这将存储客户的名称。 Cookie的有效期为365天。

我要创建的第一个cookie是名为“ lastvisit”的cookie,它存储了上次访问页面的日期/时间。

页面加载时将检查cookie是否存在。如果不存在,请在页面顶部打印:“欢迎新客户!”(如果确实存在),请阅读cookie数据并在页面顶部进行打印:“欢迎返回“客户名”。您最后一次访问是“最后一次访问”。

这是我的JavaScript和html的内容。 我知道我需要检查本地存储以检查cookie是否存在。 但是,我很难创建功能性cookie并检查cookie是否存在。

/*index.js*/
window.onload=initfunction;

function initfunction()

{

	var toDay = new Date();	

		

	document.getElementById("datefield").innerHTML = toDay;

}



function buttonandchecks()

{

	//this will use a 'for' loop to check the radio buttons and

	//a series of 'if' statements to verify the check boxes

	var x;

	var message="";
   var pizzaLine;
	var pizzaType;
	var pizzaSize;
	var pizzaPrice;	
															
	var sandwichLine;
	var samdwichsplit;
	var sandwichType;
	var sandwichPrice;
															
	var sodaLine;
	var sodaSplit;
	var sodaSize;
	var sodaPrice;
	var drink;
	

	var pizzaresultmessage="";
	var toppingresultmessage="";
	var totalresultmessage="";
	var sandwichresultmessage="";
	var sodaresultmessage="";
	var nameresultmessage=document.getElementById("name").value;
	var addressresultmessage=document.getElementById("address").value;
	var phoneresultmessage=document.getElementById("phone").value;
				   

				var giftamount=parseFloat(0);
				var orderamount=parseFloat(0);
				var sodaorderamount=parseFloat(0);
				
				var quantity = document.getElementById("quantity").value;
				var sandwichquantity = document.getElementById("sandwichquantity").value;
				var sodaquantity = document.getElementById("sodaquantity").value;

				
				var radio_value; //get value from radio button
				var sandwich_value;
				var soda_value;
	
	var sodatype_value;
	

	var totalvaluepizza=parseInt(0); //initialize this to 0
	var finalcost=parseInt(0);
	
	

	quantity = parseFloat(quantity);
	sandwichquantity = parseFloat(sandwichquantity);
	sodaquantity = parseFloat(sodaquantity);	//use query selector-specialty is the radio button type
	

	
	////////////Trial new ways//////////////////////////
		
	
	pizzaLine=document.querySelector('input[name=specialty]:checked').value;
	pizzaType=pizzaLine.split(":");
	pizzaSize=p.Type[0];
	pizzaPrice=p.Type[1];
	//parse pizzaPrice into Float to calculate Total Cost
	pizzaPrice=parseFloat(pizzaPrice);
	
	TypePizza=document.querySelector('input[name=pizzatype]:checked').value;
	
	
	
	sandwichLine=document.querySelector('input[name=sandwichtype]:checked').value;
	sandwichSplit=sandwichLine.split(":");
	sandwichType=sandwichSplit[0];
	sandwichPrice=sandwichSplit[1];
	sandwichPrice=parseFloat(sandwichPrice);

	sodaLine=document.querySelector('input[name=drinkspecialty]:checked').value;
	sodaSplit=sodaLine.split(":");
	sodaSize=sodaSplit[0];
	sodaPrice=sodaSplit[1];	
	sodaPrice=parseFloat(sodaPrice);
	
	sodaType=document.querySelector('input[name=sodatype]:checked').value;
	

	//parse radio_value to a float

	radio_value=parseFloat(radio_value);



	//if statements to get the values from the check boxes

	if(document.querySelector('input[name=extracheese]:checked'))

		{

		//giftamount+=100;//the giftamount will by increased by this value, in this case 100
		//vital: you must use parseFloat to convert the values from the check boxes to number amounts
		giftamount+=parseFloat(document.querySelector('input[name=cheese]:checked').value);

		message=(message+"cheese ");

		}

	if(document.querySelector('input[name=pepperoni]:checked'))

		{

		//giftamount+=150;
		giftamount+=parseFloat(document.querySelector('input[name=pepperoni]:checked').value);
		

		message=(message+" Pepperoni ");

		}

	if(document.querySelector('input[name=mushroom]:checked'))

		{

		//giftamount+=175;
		giftamount+=parseFloat(document.querySelector('input[name=mushroom]:checked').value);

		message=(message+" Mushroom ");

		}

	if(document.querySelector('input[name=bacon]:checked'))

		{

		//giftamount+=200;
		giftamount+=parseFloat(document.querySelector('input[name=bacon]:checked').value);

		message=(message+" Bacon ");

		}
	if(document.querySelector('input[name=olives]:checked'))

		{

		//giftamount+=200;
		giftamount+=parseFloat(document.querySelector('input[name=olives]:checked').value);

		message=(message+" Olives ");

		}
		
		

	//calculate total cost of gift

	totalvaluepizza=pizzaPrice+giftamount;

	finalcost=quantity*(pizzaPrice+giftamount)+sandwichquantity*sandwichPrice+sodaquantity*sodaPrice;

						

	pizzaresultmessage=(quantity+"  "+ pizzaSize + " " + TypePizza + " Pizza "+"  $ "+ quantity*pizzaPrice);
	toppingresultmessage=("Extra:  "+message+giftamount.toFixed(2));
	

	totalresultmessage=("Total Cost for Pizza+Sandwich+soda:  $ "+finalcost.toFixed(2));
	sandwichresultmessage=(sandwichquantity+"  "+ sandwichType+" $ " + sandwichquantity*sandwichPrice.toFixed(2));
	sodaresultmessage=(sodaquantity+" "+ sodaSize + drink + " $ " +sodaquantity*sodaPrice.toFixed(2));		
		
	

	//Customer input message displayed sections
	document.getElementById("showname").innerHTML=nameresultmessage;
	document.getElementById("showaddress").innerHTML=addressresultmessage;
	document.getElementById("showtel").innerHTML=phoneresultmessage;


	document.getElementById("showpizza").innerHTML=pizzaresultmessage;
	document.getElementById("showtopping").innerHTML=toppingresultmessage;
	document.getElementById("showtotal").innerHTML=totalresultmessage;
			
	document.getElementById("showsandwich").innerHTML=sandwichresultmessage;
	document.getElementById("showsoda").innerHTML=sodaresultmessage;

			

			

}

//usercookie.js

$(document).ready(function() {
	
	$("#submit").click(function() {
		
		var username = $("#customername").val();
		var userid = $("#lastvisit").val();
	
	$.cookie('customername’', customername,{expires:365});
	$.cookie('lastvisit’ ', lastvisit,{expires:365});
	//display cookies values
	$("#showcookies").html("Your cookies are: "+$.cookie('customername') + " and " + $.cookie('lastvisit') );


});

});
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="author" content="791894" >
<meta name="date" content="2019-03-15T22:37:02-0700" >
<script type="text/javascript" src="City Delicatessen.js"></script>
<link href="PartA.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Bitter|Open+Sans|Slabo+27px" rel="stylesheet"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/PartA.js"></script>
</head>

<body>
<h1>Today is: <span id="dtfield" ></span></h1>
<br>
<br>


<div id="background">
<br>
<h1>Welcome to City Delicatessen </h1>
<div id="contents">

<table cellpadding="5" class="formtable">
<form name="information">
<tr><td>&#183;	  First and Last Name :&nbsp;</td><td><input type="text" id="name" size="25" maxlength="25" autofocus="yes" pattern="[a-zA-Z]| |-|*$"></td></tr>
<tr><td>&#183;	  Street Address :&nbsp;</td><td><input type="text" id="address" size="25" maxlength="25" pattern="[a-zA-Z0-9]| |/|,|.|\|@|#|$|%|&)+"></td></tr>
<tr><td>&#183;	  Phone Number :&nbsp;</td><td><input type="tel" size="25" id="phone" placeholder="XXX XXX XXXX" pattern="\d{3} \d{3} \d{4}"></td></tr>
</form>
</table>
<br><br>

<form name=order>
<table style="width:100%">

<tr valign=top>
<td>
<b>Choose Pizza <b><br>
  <img src="cheesepizza.jpg" alt="Forest">
<input type=radio name=pizzatype value=0.00 checked>Super Cheesy<br>
  <img src="meatpizza.jpg" alt="Forest">
<input type=radio name=pizzatype  value=0.00 >Extra Meaty<br>
  <img src="veggypizza.jpg" alt="Forest">
<input type=radio name=pizzatype  value=0.00 >Really Veggy<br>
</td>
</table>
<br>
<table>
<td>
<b>Choose Size <b><br>
<input type=radio name=specialty value=8.50 checked >Small: $8.50<br>
<input type=radio name=specialty value=11.50>Medium: $11.50<br>
<input type=radio name=specialty value=14.00>Large: $14.00<br>
<input type=radio name=specialty value=16.50>Extra Large: $16.50<br>
</td>
</table>

<table>
<br>
	<tr><td>How many do you want?</td><td><input type="number" size="12" id="quantity" min="0" alt="marked"></td></tr>
</table>
<br>
<table>
<td>
<b>Choose Extra Toppings($1.75 per topping) </b><br>
<input type=radio name=cheese value=1.75 checked>Extra Cheese<br>
<input type=radio name=pepperoni value=1.75>Pepperoni<br>
<input type=radio name=mushroom value=1.75>Mushrooms<br>
<input type=radio name=bacon value=1.75>Bacon<br>
<input type=radio name=olives value=1.75>Olives<br>
</td>
</table>
</tr>


<table style="width:100%">

<tr valign=top>
<td>
<b>Choose Sandwich <b><br>
<img src="garden.jpg" alt="">
<input type=radio name=sandwichtype value=7.50 checked>All Garden Vegetarian $7.50<br>
<img src="beef.jpg" alt="">
<input type=radio name=sandwichtype value=8.50>Big Beef on a Bun $8.50<br>
<img src="mixedgrill.jpg" alt="">
<input type=radio name=sandwichtype value=9.50>Mixed Grill $9.50<br>
<img src="grilledpork.jpg" alt="">
<input type=radio name=sandwichtype value=9.50>Grilled Pork $9.50<br>
</td>
</table>
<br>
<table>
<br>

	<tr><td>How many do you want?</td><td><input type="number" size="12" id="quantity" min="0"></td></tr>
</table>
<br>

<table>
<td>
<b>Choose Drinks </b><br>
<input type=radio name=drink checked>Cola<br>
<input type=radio name=drink >Orange<br>
<input type=radio name=drink >Lemon<br>
<input type=radio name=drink >Root Beer<br>
</td>
</table>
<br>
<table>
<td>
<b>Choose Size (Small: $1.25, Medium $1.75, Large: $2.00) </b><br>
<input type=radio name=drinkspecialty value=1.25 checked>Small<br>
<input type=radio name=drinkspecialty value=1.75 >Medium<br>
<input type=radio name=drinkspecialty value=2.00 >Large<br>
</td>
</table>

<table>
<br>

	<tr><td>How many do you want?</td><td><input type="number" size="12" id="quantity" min="0"></td></tr>
	
</table>
</tr>

<br>
<br>
<button onclick="buttonandchecks()">Order Menu</button>
<h2>Order Description: </h2><h2><span id="result"></span></h2>
</form>

<h2>This program will set a session cookie and long term cookie</h2>

<form>
<table>
<tr><td>Customer Name: </td><td><input type="text" size="20" id="customername" /></td></tr>
<tr><td>Last Visit: </td><td><input type="text" size="20" id="lastvisit" /></td></tr>
</table>
<input type="button" value="Write Cookies" id="submit" />

</form>

<h2><span id="showcookies"></span>
</h2>

<br>
<h3><span id="showname"></span></h3>
<h3><span id="showaddress"></span></h3>
<h3><span id="showtel"></span></h3>
<br>
<h3><span id="showpizza"></span></h3>
<h3><span id="showtopping"></span></h3>
<h3><span id="showsandwich"></span></h3>
<h3><span id="showsoda"></span></h3>
<h3><span id="showtotal"></span></h3>

<br>	

</body>
</html>`

0 个答案:

没有答案