We all know the characteristics of cookies. Cookies take effect under the same domain name. The storage capacity of cookies is limited. Cookies are mainly used to record some information of users. For example, to record the login information of users so that users do not need to log in for a period of time, it is created by the server and placed on the client.
Definition of cross page value transfer: refers to the value transfer between WEB pages, including simple page form value transfer and variable value transfer in page program
The following cross page value passing case of imitating cookie is a case of imitating shopping cart, which takes the selected value jump of list interface to shopCar interface.
github address: https://github.com/wangxiaoting666/cookielist
list interface:
<!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 Small fresh rose influence living room decoration vase</h4>
<h3>Price: 18</h3>
</div>
<input type="button" id="buy" value='Immediate purchase'>
<input type="button" id='add' value='increase'>
<input type="button" id='reduce' value='reduce'>
</div>
<div class="car">
<span class='num' id='num'>0</span>
</div>
</div>
</body>
</html>
shopCar interface:
<!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='You didn't select anything';
setTimeout(function(){
window.location.href='list.html'
},1000)
}else{
oDiv.innerHTML='I know I want to buy'+num+'Bunch of beautiful flowers!! Beautiful mood!!!'+'<img src="images/2.png">';
}
}
</script>
</html>
Encapsulated 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)
}
}
Original author: miss qiche;