#27购物车案例巩固cookie和localstorage

最新推荐文章于 2022-02-23 15:15:02 发布

DanielLeefu

最新推荐文章于 2022-02-23 15:15:02 发布

阅读量247

点赞数

分类专栏：自学前端代码 javascript

本文链接：https://blog.csdn.net/qq_41579115/article/details/101079488

版权

javascript 同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

代码

11 篇文章 0 订阅

订阅专栏

自学前端

6 篇文章 0 订阅

订阅专栏

cookie.js

function $cookie(key, value, expires) {
    let cookieText = encodeURIComponent(key) + '=' + encodeURIComponent(value) + ";path=/";
    if (!isNaN(expires)) {
        let date = new Date();
        date.setDate(date.getDate() + expires);
        cookieText += ';expires=' + date;
    }
    document.cookie = cookieText;
}

function $getCookie(key) {
    let cookie = document.cookie;
    let arr = cookie.split('; ');
    for (let i = 0, len = arr.length; i < len; i++) {
        let list = arr[i].split('=');
        if (list[0] === encodeURIComponent(key)) {
            return decodeURIComponent(list[1]);
        }
    }
}

function $removeCookie(key) {
    document.cookie = encodeURIComponent(key) + '=;expires=' + new Date(0) + ';path=/';
}

cart.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        .cartList {
            width: 1205px;
        }
        
        ul {
            list-style: none;
        }
        
        .cartHead {
            border: 1px solid black;
            height: 50px;
        }
        
        .cartHead li {
            width: 200px;
            height: 50px;
            float: left;
            font: 32px/50px "楷体";
            text-align: center;
        }
        
        .goodInfo {
            border: 1px solid black;
            border-top: none;
            height: 50px;
        }
        
        .goodInfo li {
            float: left;
            width: 200px;
            height: 50px;
            float: left;
            font: 24px/50px "";
            text-align: center;
        }
        
        .goodInfo li input {
            width: 30px;
            text-align: center;
        }
        
        .goodInfo li.num a {
            display: inline-block;
            width: 10px;
            height: 20px;
            font: 12px/20px "";
            background: #ddd;
            text-decoration: none;
        }
        
        .goodInfo li img {
            width: 40px;
            height: 40px;
            margin-top: 5px;
            text-align: center;
        }
        
        .blank {
            height: 50px;
            font: 32px/50px "";
            text-align: center;
            border: 1px solid black;
            border-top: none;
            display: none;
        }
    </style>

</head>

<body>
    <div class="cartList">
        <ul class="cartHead">
            <li>缩略图</li>
            <li>品名</li>
            <li>单价</li>
            <li>数量</li>
            <li>小计</li>
            <li>操作</li>
        </ul>
        <!--<ul class="goodInfo" data-good-id="sp1">
				<li><img src="img/1.jpg" /></li>
				<li>测试</li>
				<li>30</li>
				<li class="num">
					<a href="javascript:;" class="minus">-</a>
					<input type="text" name="" id="" value="2" />
					<a href="javascript:;" class="plus">+</a>
				</li>
				<li class="total">60</li>
				<li><a href="javascript:;" class="del">删除</a></li>
			</ul>-->
        <div class="blank">
            您的购物车空空如也~~
        </div>
    </div>
    <script>
        // 获取storage中的数据
        let storage = window.localStorage;
        let str = storage.carts ? storage.carts : '';
        let obj = convertStorageStrToStorageObj(str);
        let oDiv = document.querySelector('.cartList');

        // 遍历对象
        for(let key in obj){
            let good = obj[key];
            let str = `
            <ul class="goodInfo" data-good-id="${key}">
				<li><img src="${good.src}" /></li>
				<li>${good.name}</li>
				<li>${good.price}</li>
				<li class="num">
					<a href="javascript:;" class="minus">-</a>
					<input type="text" name="" id="" value="${good.num}" />
					<a href="javascript:;" class="plus">+</a>
				</li>
				<li class="total">${good.price*good.num}</li>
				<li><a href="javascript:;" class="del">删除</a></li>
			</ul>
            `;
            oDiv.innerHTML += str;
        }
        // 加
        let plus = document.querySelectorAll('.goodInfo .plus');
        for(let i = 0,len = plus.length;i<len;i++){
            plus[i].onclick = function(){
                let goodId =this.parentNode.parentNode.getAttribute('data-good-id');
                let storage = window.localStorage;
                let str = storage.carts ? storage.carts : '';
                let obj = convertStorageStrToStorageObj(str);
                obj[goodId].num++;
                storage.carts = JSON.stringify(obj);
                this.previousElementSibling.value = obj[goodId].num;
                this.parentNode.nextElementSibling.innerHTML = obj[goodId].price * obj[goodId].num;
            }
        }
        // 减
        let minus = document.querySelectorAll('.goodInfo .minus');
        for(let i = 0,len = minus.length;i<len;i++){
            minus[i].onclick = function(){
                let goodId =this.parentNode.parentNode.getAttribute('data-good-id');
                let storage = window.localStorage;
                let str = storage.carts ? storage.carts : '';
                let obj = convertStorageStrToStorageObj(str);
                if(obj[goodId].num >1){
                obj[goodId].num--;}
                storage.carts = JSON.stringify(obj);
                this.nextElementSibling.value = obj[goodId].num;
                this.parentNode.nextElementSibling.innerHTML = obj[goodId].price * obj[goodId].num;
            }
        }

        let oInp = document.querySelectorAll('.goodInfo .num input');
        for (let i = 0, len = oInp.length; i < len; i++) {
                oInp[i].onblur = function() {
                    let goodId = this.parentNode.parentNode.getAttribute('data-good-id');
                    let storage = window.localStorage;
                    let str = storage.carts ? storage.carts : '';
                    let obj = convertStorageStrToStorageObj(str);
                    let value = this.value;
                    if (!isNaN(value) && value > 0) {
                        obj[goodId].num = value;
                    } else {
                        obj[goodId].num = 1;
                    }
                    storage.carts = JSON.stringify(obj);
                    //数量框
                    this.value = obj[goodId].num;
                    //小计
                    this.parentNode.nextElementSibling.innerHTML = obj[goodId].price * obj[goodId].num;
                }
            }




        // 删除
        let del = document.querySelectorAll('.goodInfo .del');

        for(let i = 0,len = del.length;i<len;i++){
            del[i].onclick = function(){
                let goodId = this.parentNode.parentNode.getAttribute('data-good-id');
                let storage = window.localStorage;
                let str = storage.carts ? storage.carts : '';
                let obj = convertStorageStrToStorageObj(str);
                
                // delete
                delete obj[goodId];
                storage.carts = JSON.stringify(obj);
                this.parentNode.parentNode.remove();
            }
        }


        function convertStorageStrToStorageObj(str){
            if(!str){
                return{};
            }
            return JSON.parse(str);
        }
    </script>
</body>

</html>

product.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .goodList img {
            width: 200px;
            height: 300px;
        }
        
        .goodInfo {
            display: inline-block;
            width: 200px;
        }
        
        #buy {
            position: fixed;
            top: 300px;
            right: 0px;
        }
    </style>
</head>

<body>
    <div class="goodList">
        <div class="goodInfo" data-good-id="sp1">
            <img src="img/1.jpg" /><br />
            <span>香蕉</span>
            <span>30RMB</span>
            <input type="button" name="" id="" value="加入购物车" class="addToCart" />
        </div>
        <div class="goodInfo" data-good-id="sp2">
            <img src="img/2.jpg" /><br />
            <span>苹果</span>
            <span>40RMB</span>
            <input type="button" name="" id="" value="加入购物车" class="addToCart" />
        </div>
        <div class="goodInfo" data-good-id="sp3">
            <img src="img/3.jpg" /><br />
            <span>梨</span>
            <span>50RMB</span>
            <input type="button" name="" id="" value="加入购物车" class="addToCart" />
        </div>
    </div>
    <input type="button" value="购物车(0)" id="buy" />
    <script>
        
        let oBuy = document.querySelector('#buy');
        let oAddToCart = document.querySelectorAll('.goodList .addToCart');

        initNum();
        // 添加事件
        oBuy.onclick = function(){
            location.href = 'cart.html';
        }
        // 遍历
        for(let i = 0,len = oAddToCart.length;i<len;i++){
            oAddToCart[i].onclick = function(){
                // 获取商品id
                let goodId = this.parentNode.getAttribute('data-good-id');
                // 获取名称
                let goodName = this.previousElementSibling.previousElementSibling.innerHTML;
                // 获取src
                let goodSrc = this.parentNode.firstElementChild.src;
                // 商品单价
                let goodPrice = parseInt(this.previousElementSibling.innerHTML);
                
                /*
                	localStorage : key = value
                	key : carts
                	value : {
                		"sp1" : {
                			"name" : "苹果",
                			"price" : 50,
                			"src" : "img/1.jpg",
                			"num" : 1
                		},
                		"sp2" : {
                			"name" : "苹果",
                			"price" : 50,
                			"src" : "img/1.jpg",
                			"num" : 1
                		},
                		"sp3" : {
                			"name" : "苹果",
                			"price" : 50,
                			"src" : "img/1.jpg",
                			"num" : 1
                		}
                	}
                */
                // 创建localStorage ,获取信息
                let storage = window.localStorage;
                let goodStr = storage.carts ? storage.carts : '';
                // 转为对象
                let goodObj = convertStorageStrToStorageObj(goodStr);
                // 判断当前购买商品是否存在
                if(goodId in goodObj){
                    // 在，数量+1
                    goodObj[goodId].num++;
                }else{
                    goodObj[goodId] = {
                        "name" : goodName,
                        "price" : goodPrice,
                        "src" : goodSrc,
                        "num" : 1
                    }
                }
                // 重新加入localStorage
                storage.carts = JSON.stringify(goodObj);
                // 改变购物车中按钮的数量
                let strNum = oBuy.value;
                let re = /(\d+)/;
                let num = Number(re.exec(strNum)[1]);
                // 返回类数组，获取字符串中包含正则的内容，第一个元素是整个正则匹配的内容
                oBuy.value = `购物车(${num + 1})`;
            }
        }

        //初始化页面中购物车按钮中的数量
        function initNum(){
            let storage = window.localStorage;
            let str = storage.carts;
            let obj = convertStorageStrToStorageObj(str);
            let sum = 0;
            for(let key in obj){      /????
                sum +=obj[key].num;  ?????
            }
            oBuy.value = `购物车(${sum})`;
        }

        function convertStorageStrToStorageObj(str){
            if(!str){
                return{};
            }
            return JSON.parse(str);
        }
    </script>
   
        
    </body>
    </html>

registor.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>用户注册</h1>
    <p>请输入用户名：<input type="text" class="txt" ></p>
    <p>请输入密码：<input type="password" class="txt"></p>
    <p>
        <input type="button" value = "注册" class="btn">
        <input type="button" value="去登陆" class="btn">
    </p>

    <script src="js/cookie.js"></script>
    <script>
        // 获取页面元素
        // 获取用户输入的数据框
        let oTxt = document.querySelectorAll('.txt');
        // 按钮
        let oBtn = document.querySelectorAll('.btn');

        // 添加事件
        oBtn[0].onclick = function(){
            let uname = oTxt[0].value;
            let upwd = oTxt[1].value;

            // 判断是否为空
            if (!uname || !upwd){
                alert('用户名和密码不能为空');
                return;
            }
            // 判断正则，以及后端有没有
            /*
                用户名  ： 中文 至少两个
                    /^[\u4e00-\u9fa5]{2,}$/
                密码  ：  字母数字 下划线， 3—— 12
                    /^\w{3,12}$/

                // cookie的值
                key = value; expires = 日期对象 ；path=/
                key : "registors"
                value:'{uname:upwd,uname:upwd}'
            */

            // 获取cookie
            // 注意如果里面一个cookies也没有。则是undefined,y也要转为对象格式
             //将cookie字符串转为cookie对象
                // function convertCookieStrToCookieObj(str) {
                //     if (!str) {
                //         return {};
                //     }
                //     return JSON.parse(str);
                // }
            // 获取cookie
            let cookieStr = $getCookie('registors') ? $getCookie('registors') : '';
            // 转成对象
            let cookieObj = convertCookieStrToCookieObj(cookieStr);
            // 判断对象中是否有当前注册的用户
            // in 判断是否属于这个对象
            if(uname in cookieObj){
                alert('用户已存在！');
                return;
            }else{
                cookieObj[uname] = upwd; //?????
            }
            // 创建cookies
            $cookie('registors',JSON.stringify(cookieObj),7);
        }
        oBtn[1].onclick = function(){
            location.href = 'login.html';
        }

        // 正则判断输入框是否合法
        oTxt[0].onblur = function(){
            let uname = this.value;
            let re = /^[\u4e00-\u9fa5]{2,}$/;
            if (!re.test(uname)) {
                alert('请输入两个及以上的中文字符！');
            }
        }
        oTxt[1].onblur = function() {
            let upwd = this.value;
            let re = /^\w{3,12}$/;
            if (!re.test(upwd)) {
                alert('请输入3到12位的字母数字下划线的组合！');
            }
        }

        // 将获取的cookie字符串转为cookie对象
        function convertCookieStrToCookieObj(str){
            if(!str){
                return {};
            }
            return JSON.parse(str);
        }

    </script>
</body>
</html>

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
</head>
<body>
    <h1>用户登录</h1>
    <p>请输入用户名：<input type="text" class="txt" id=""> </p>
    <p>请输入密码：<input type="text" class="txt"></p>
    <p>
        <input type="button" value="登录" class="btn">
        <input type="button" value="去注册" class="btn">
    </p>
    <script src="js/cookie.js"></script>
    <script>
        let oTxt = document.querySelectorAll('.txt');
        let button = document.querySelectorAll('.btn');
        oTxt[0].onblur = function(){
            let str = this.value;
            let re = /^[\u4e00-\u9fa5]{2,}$/;
            if (!re.test(str)) {
                alert('请输入两个及以上的中文字符！');
            }
        }
        oTxt[1].onblur = function(){
            let str = this.value;
            let re = /^\w{3,12}$/;
            if(!re.test(str)){
                alert('请输入3到12位的字母数字下划线的组合！');
            }
        } 

        button[0].onclick = function(){
            let uname = oTxt[0].value;
            let upwd = oTxt[1].value;

            if(!uname || !upwd){
                alert('用户密码不能为空');
                return;
            }
            let cookieStr = $getCookie('registors') ? $getCookie('registors') :'';

            let cookieObj = convertCookieStrToCookieObj   (cookieStr);

            if(uname in cookieObj){
                    if(cookieObj[uname] === upwd){
                        location.href = 'product.html';
                    }else{
                        alert('密码不正确');
                    }
            }else{
                alert('用户不存在');
            }

        }
        function   convertCookieStrToCookieObj(str){
            if(!str){
                return {};
            }
            return JSON.parse(str);
        }

    </script>
</body>
</html>

DanielLeefu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
#27购物车案例巩固cookie和localstorage

cookie.jsfunction $cookie(key, value, expires) { let cookieText = encodeURIComponent(key) + '=' + encodeURIComponent(value) + ";path=/"; if (!isNaN(expires)) { let date = new Date();...
复制链接

扫一扫