cookie的跨頁面傳值問題仿購物車案例
阿新 • • 發佈：2018-12-10
大家都知道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後前端妹子，愛程式設計，愛運營，愛折騰。 堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。