cookie的跨页面传值问题仿购物车案例

wx610019c35dc44 2021-07-28 17:31:25 阅读数:82

本文一共[544]字,预计阅读时长:1分钟~
cookie

大家都知道cookie的特性, cookie生效在同一个域名下,cookie储存量有限,cookie主要用于记录用户的一些信息,例如记录用户的登录信息使用户一段时间内不用登录,它有服务器创建,并放在客户端。

跨页面传值定义:统指WEB页面之间的传值,包括简单的页面表单传值和页面程序中的变量传值

以下仿写cookie的跨页面传值问题仿购物车案例,把list界面选定的数值跳转带到shopCar界面。

list界面:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0 auto;
}
.content {
width: 800px;
height: 100px;
background: #f9f9f9;
border-radius: 5px;
box-shadow: 0 3px 10px #666;
margin: 50px auto;
}
.picwarp {
width: 120px;
height: 98px;
border: 1px solid #fff;
float: left;
}
.picwarp img {
width: 100%;
height: 100%;
}
.warp:after {
content: '';
display: block;
clear: both;
}
.warp input {
display: block;
float: right;
background: none;
border: 2px solid #fff;
border-radius: 2px;
width: 80px;
height: 30px;
margin-top: 30px;
margin-right: 30px;
}
.car {
float: right;
position: relative;
width: 80px;
height: 40px;
color: red;
font-size: 30px;
font-weight: bold;
right: -100px;
top: -40px;
background-image: url(images/1.png);
background-size: 100% 90%;
background-repeat: no-repeat;
}
.text {
float: left;
}
.text h4 {
padding-left: 40px;
padding-top: 20px;
}
.text h3 {
padding-top: 15px;
padding-left: 40px;
color: red;
}
</style>
<script src='cookie.js'></script>
<script>
window.onload = function() {
var add = document.getElementById('add');
var redu = document.getElementById('reduce');
var num = 0;
var res = document.getElementById('num');
var buy = document.getElementById('buy');
add.onclick = function() {
num++
res.innerHTML = num;
}
redu.onclick = function() {
if(num > 0) {
num--
res.innerHTML = num;
}
}
buy.onclick = function() {
var resNum = res.innerHTML;
cookie.setCookie('num', resNum);
window.location.href = 'shopCar.html'
}
}
</script>
</head>
<body>
<div class="content">
<div class="warp">
<div class="picwarp">
<img src="images/2.png" alt="">
</div>
<div class="text">
<h4>ins小清新玫瑰感化客厅装饰花瓶</h4>
<h3>售价:18</h3>
</div>
<input type="button" id="buy" value='立即购买'>
<input type="button" id='add' value='增加'>
<input type="button" id='reduce' value='减少'>
</div>
<div class="car">
<span class='num' id='num'>0</span>
</div>
</div>
</body>
</html>

shopCar界面:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
width: 859px;
height: 100px;
line-height: 100px;
border: 2px solid #b6b6b6;
color: blueviolet;
margin: 80px auto;
font-size: 18px;
text-align: center;
}
body{
background:#f9f9f9;
}
</style>
</head>
<body>
<div id='div1'></div>
</body>
<script src='cookie.js'></script>
<script>
window.onload=function(){
var num=cookie.getCookie('num')
var oDiv=document.getElementById('div1');
if(num=='0'){
oDiv.innerHTML='你没有选中任何商品';
setTimeout(function(){
window.location.href='list.html'
},1000)
}else{
oDiv.innerHTML='我知道我要买'+num+'束漂亮的花朵!!心情美美哒!!!'+'<img src="images/2.png">';
}
}
</script>
</html>

封装的cookie.js

var cookie={
setCookie:function(name,value,date){
var d=new Date();
d.setTime(d.getTime()+date);
document.cookie=name+'='+value+';expires='+d;
},
getCookie:function(name){
var arr=document.cookie.split('; ');
for(var i = 0 ; i < arr.length; i ++){
var arr2=arr[i].split('=');
if(arr2[0]==name){
return arr2[1];
}
}
return '';
},
removeCookie:function(name){
cookie.setCookie(name,'',-1)
}
}

效果:

 

 
5640239-7b84e9c0bec8543f.gif

原文作者:祈澈姑娘
90后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

版权声明:本文为[wx610019c35dc44]所创,转载请带上原文链接,感谢。 https://blog.51cto.com/u_15315508/3214436