Cookie和JS购物车的简单实例

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Cookie和JS购物车的简单实例相关的知识，希望对你有一定的参考价值。

最近学原生的javascript，需要弄个购物车的功能,下面是利用cookie做的一个演示

思路其实很简单，商品界面通过value获取对应的值，然后把这个商品的各种信息放入一个字典；因为有多个商品，把这些商品的字典对象都放在一个数组里面就行了。然后通过JSON序列化这个这个数组，保存在cookie里面。在购物车界面通过读取cookie获取这些信息，然后动态地创建一个表格显示即可。



商品界面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物页面</title>
<style>
ul{list-style:none;padding:0;margin:0;}
.goods li{display:inline-block;border:1px solid #ddd;padding:10px;margin:10px;}
.goods li:hover{background-color:#efefef;}
.goods .price{color:#f00;font-weight:bold;}
.goods .price::before{
content:"￥";
}
</style>
<script>
window.onload = function(){
    var goods = document.getElementsByClassName(‘goods‘)[0];
    // 用于保存购物车商品信息
    var carList = [];
    // 先获取当前cookie
    var cookies = document.cookie.split(‘; ‘);
    for(var i=0;i<cookies.length;i++){
        var arr = cookies[i].split(‘=‘);
        if(arr[0] === ‘carlist‘){
            carList = JSON.parse(arr[1]);
        }
    }
// 事件委托
    goods.|| window.event;
        var target = e.target || e.srcElement;
        // 添加到购物车
        if(target.tagName.toLowerCase() === ‘button‘){
        // 获取当前li （Li-div-button)
        var currentLi = target.parentElement.parentElement;
        var children = currentLi.children;
        var currentGUID = currentLi.getAttribute(‘data-guid‘);
        // 先创建一个对象保存当前商品信息
        var goodsObj = {};
        goodsObj.guid = currentGUID;
        goodsObj.qty = 1;
        goodsObj.name = children[1].innerHTML;
        goodsObj.price = children[2].innerHTML;
        goodsObj.imgUrl = children[0].src;
        // 如果cookie为空，则直接添加
        if(carList.length===0){
        // 添加到carList
        carList.push(goodsObj);
        }else{
        // 先判断cookie中有无相同的guid商品
            for(var i=0;i<carList.length;i++){
            // 如果商品已经存在cookie中，则数量+1
                if(carList[i].guid === currentGUID){
                    carList[i].qty++;
                    break;
                }
            }
    // 如果原cookie中没有当前商品
        if(i===carList.length){
        // 添加到carList
        carList.push(goodsObj);
        }
        }
        // 存入cookie
        // 把对象/数组转换诚json字符串：JSON.stringify()
        document.cookie = ‘carlist=‘ + JSON.stringify(carList);
        }
    }
}
</script>
</head>
<body>
    <ul class="goods">
        <li data-guid="g01">
            <img src="img/02.jpg">
            <p>货物1</p>
            <p class="price">98.88</p>
            <div class="add2cart">
                <button onclick="Favor(this);">添加到购物车</button>
            </div>
        </li>
        <li data-guid="g02">
            <img src="img/03.jpg">
            <p>货物2</p>
            <p class="price">88.88</p>
            <div class="add2cart">
                <button onclick="Favor(this);">添加到购物车</button>
            </div>
        </li>
        <li data-guid="g03">
            <img src="img/04.jpg">
            <p>货物3</p>
            <p class="price">9.98</p>
            <div class="add2cart">
                <button onclick="Favor(this);">添加到购物车</button>
            </div>
        </li>
        <li data-guid="g04">
            <img src="img/05.jpg">
            <p>货物4</p>
            <p class="price">8.88</p>
            <div class="add2cart">
                 <button onclick="Favor(this);">添加到购物车</button>
            </div>
        </li>
    </ul>
    <a href="a2.html">去结算</a>
</body>
<script>
         function Favor(ths){
            // ths => this => 当前触发事件的标签
            var top = 49;
            var left = 71;
            var op = 1;
            var fontSize = 18;
            var tag = document.createElement(‘span‘);
            tag.innerText = ‘+1‘;
            tag.style.position = ‘absolute‘;
            tag.style.top = top + "px";
            tag.style.left = left + "px";
            tag.style.opacity = op;
            tag.style.fontSize = fontSize + ‘px‘;
            ths.parentElement.appendChild(tag);
            var interval = setInterval(function(){
                top -= 10;
                left += 10;
                fontSize += 5;
                op -= 0.1;
                tag.style.top = top + "px";
                tag.style.left = left + "px";
                tag.style.opacity = op;
                tag.style.fontSize = fontSize + ‘px‘;
                if(op <= 0.2){
                    clearInterval(interval);
                    ths.parentElement.removeChild(tag);
                }
            }, 50);
        }
</script>
</html>


技术分享




购物车的界面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<style>
#carList li{position:relative;padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid #ddd;}
#carList img{display:block;width:100px;}
 .btn-close{padding:0 5px;cursor:default;}
.btn-close:hover{background-color:#f00;color:#fff;}
.subPrice{padding:5px 20px;color:#f00;font-weight:bold;text-align:right;}
#carList .price{color:#f00;}
table
{
    margin-left: auto;
    margin-right: auto;
}
.price::before{
content:‘￥‘;
font-size:11px;
}
/* Table Head */
/* Table Head */
#mytable th {
background-color: rgb(156, 186, 95);
color: #fff;
border-bottom-width: 1px;
}
/* Column Style */
#mytable td {
color: #000;
}
/* Heading and Column Style */
#mytable tr {
border-width: 1px;
border-style: solid;
border-color: rgb(156, 186, 95);
}
/* Padding and font style */
#mytable td {
padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
font-weight: bold;
}
#carList .price span{font-size:11px;}
</style>
<script>
window.onload = function(){
/*
读取cookie中的carlist
把json字符串转换成对象/数组：JSON.parse()
json字符串格式：
1.必须用双引号
2.不能右注释
*/
var oCarList = document.getElementById(‘carList‘);
var oSubPrice = oCarList.nextElementSibling;
var btnClear = document.getElementById(‘btnClear‘);
var carList;
var cookies = document.cookie.split(‘; ‘);
for(var i=0;i<cookies.length;i++){
var arr = cookies[i].split(‘=‘);
if(arr[0] === ‘carlist‘){
console.log(JSON.parse(arr[1]));
carList = JSON.parse(arr[1]);
}
}
var subPrice = 0;
    //动态的根据cookie的内容创建列表
if(carList){
    var tableRef = document.getElementById(‘mytable‘).getElementsByTagName(‘tbody‘)[0];
    console.log(tableRef);
            // Insert a row in the table at the last row
    for(var i=0;i<carList.length;i++) {
        //插入一行
        var newRow = tableRef.insertRow(tableRef.rows.length);
        newRow.setAttribute(‘data-guid‘,carList[i].guid)
        //插入4列
        var cell0 = newRow.insertCell(0);
        var cell1 = newRow.insertCell(1);
        var cell2 = newRow.insertCell(2);
        var cell3 = newRow.insertCell(3);
        var cell4 = newRow.insertCell(4);
        // Append a text node to the cell
        var title = document.createTextNode(carList[i].name);
        cell0.appendChild(title);
        var price = document.createTextNode(carList[i].price);
        cell1.appendChild(price);
        var number=document.createTextNode(carList[i].qty);
        cell2.appendChild(number)
        var img = document.createElement(‘img‘);
        img.src = carList[i].imgUrl;
        cell3.appendChild(img)
        var btnClose = document.createElement(‘span‘);
        btnClose.innerHTML = ‘删除‘;
        btnClose.className = ‘btn-close‘;
        cell4.appendChild(btnClose)
    // 计算总价
        subPrice += carList[i].price*carList[i].qty;
//        li.appendChild(title);
//        li.appendChild(price);
//        li.appendChild(img);
//        li.appendChild(btnClose);
//        ul.appendChild(li);
    }
    // 写入页面
//    oCarList.appendChild(ul);
    // 写入总价
    // toFixed(n)获取小数点后n位（自动四舍五入，Number类型的方法）
oSubPrice.innerHTML = ‘<span class="price">‘ + subPrice.toFixed(2) + ‘</span>‘;
}
// 删除商品
oCarList.|| window.event;
var target = e.target || e.srcElement;
// 是否点击了删除按钮
if(target.className === ‘btn-close‘){
var currentLi = target.parentElement.parentElement;
var currentGUID = currentLi.getAttribute(‘data-guid‘);
// 删除cookie中对应的商品
// 根据guid取对比
for(var i=0;i<carList.length;i++){
// 找出要删除的商品
if(carList[i].guid === currentGUID){
carList.splice(i,1);
break;
}
}
// 更新cookie
document.cookie = ‘carlist=‘ + JSON.stringify(carList);
// 删除li节点
currentLi.parentElement.removeChild(currentLi);
location.reload()
}
}
// 清空购物车
// 1、删除DOM节点
// 2、删除cookie
btnClear.onclick = function(){
oCarList.innerHTML = ‘‘;
oSubPrice.innerHTML = ‘‘;
// 利用设置有效期位过期事件来达到删除cookie的效果
var now = new Date();
now.setDate(now.getDate()-7);
document.cookie = ‘carlist=xx;expires=‘ + now;
}
}
</script>
</head>
<body>
<h1>我的购物车</h1>
<div id="carList">
    <table id="mytable"  width="100%" >
    <th>商品信息</th>
    <th>单价</th>
    <th>数量</th>
    <th>照片</th>
    <th>操作</th>
    <tbody>
    </tbody>
    </table>
</div>
<div class="subPrice"></div>
<a href="#" id="btnClear">清空购物车</a>
<a href="index.html">继续购物</a>
</body>
</html>

技术分享



cookie的内容


技术分享

本文出自 “麻婆豆腐” 博客，请务必保留此出处http://beanxyz.blog.51cto.com/5570417/1926569

以上是关于Cookie和JS购物车的简单实例的主要内容，如果未能解决你的问题，请参考以下文章

转 通过js获取cookie的实例及简单分析

js代码片段: utils/lcoalStorage/cookie

用js实现购物车（用js cookie传递数据）

使用JavaScript Cookie的简单购物车

XSS：如何从 C# 中的字符串中删除 JS 片段？

第一种方式：cookie的优化与购物车实例