cookie的跨頁面傳值問題仿購物車案例
摘要：
大家都知道cookie的特性， cookie生效在同一個域名下，cookie儲存量有限，cookie主要用於記錄使用者的一些資訊，例如記錄使用者的登入資訊使使用者一段時間內不用登入，它有伺服器建立，並放在客戶端。
跨頁面傳值定義：統指WEB頁面之間的傳值，包括簡單的頁面表單傳值和頁面程式中...
大家都知道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)
}
}
效果：
原文作者：祈澈姑娘；技術部落格： https://www.jianshu.com/u/05f416aefbe1
90後前端妹子，愛程式設計，愛運營，愛折騰。 堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。