对cookie的简单运用

最新推荐文章于 2024-04-22 13:40:15 发布

小松鼠绅士

最新推荐文章于 2024-04-22 13:40:15 发布

阅读量216

点赞数

文章标签： javascript cookie JSON.parse JSON.stringify

本文链接：https://blog.csdn.net/mydreamhope/article/details/54381020

版权

提交订单页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提交订单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            margin: 0 auto;
            text-align: center;
        }

        #ip {
            width: 100px;
            height: 40px;
            outline: none;
            border: none;
            background-color: #ff1a1a;
            color: #fff;
            font-size: 16px;
            font-family: Arial;
            margin-top: 15px;
        }

        .money {
            color: #ff1919;
        }

        strong {
            color: #ff1919;
        }

        #number {
            width: 50px;
            outline: none;
        }
    </style>
    <script>
        window.onload = function () {
            // 获取第一个span
            var span = document.getElementsByTagName("span")[0];
            // 获取第一个strong
            var strong = document.getElementsByTagName("strong")[0];
            // 获取input
            var number = document.getElementById("number");
            // 获取提交按钮
            var btnSubmit = document.getElementById("ip");
            // 点击事件
            btnSubmit.onclick = function () {
                // 创建字面量对象
                var obj = {
                    // {key:value}
                    goodsName: span.innerHTML,
                    goodsPrice: strong.innerHTML,
                    goodsNumber: number.value
                };
                // 将JSON对象转成JSON字符串
                var objStr = JSON.stringify(obj);
                // JSON字符串赋值给cookie
                document.cookie = objStr;
            }
        }
    </script>
</head>
<body>
<div id="box">
    <form action="购物车.html" method="get">
        商品信息：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
        <img src="https://img-blog.csdn.net/20170112193814201?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbXlkcmVhbWhvcGU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="坚果大礼包图片" title="坚果大礼包"><br>
        商品名称：<span>坚果大礼包</span>
        <br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="money">￥</span><strong>5000</strong>
        <br>
        选择商品数量：<input id="number" type="number" min="1" max="100">
        <br>
        <input id="ip" type="submit" value="加入购物车">
    </form>
</div>
</body>
</html>

购物车页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车信息</title>
    <style>
        span {
            color: #ff1919;
        }
    </style>
    <script>
        window.onload = function () {
            // 商品名称
            var goodsName = document.getElementsByTagName("span")[0];
            // 商品单价
            var goodsPrice = document.getElementsByTagName("span")[1];
            // 商品数量
            var goodsNumber = document.getElementsByTagName("span")[2];
            // 商品总价
            var goodsTotalPrice = document.getElementsByTagName("span")[3];
            // 创建cookie
            var cookie = document.cookie;
            // 将JSON字符串转成JSON对象
            var obj = JSON.parse(cookie);
            // 商品名称
            goodsName.innerHTML = obj.goodsName;
            // 商品单价
            goodsPrice.innerHTML = obj.goodsPrice;
            // 商品数量
            goodsNumber.innerHTML = obj.goodsNumber;
            // 商品总价
            goodsTotalPrice.innerHTML = obj.goodsPrice * obj.goodsNumber;
            if (obj.goodsNumber==""){
                goodsNumber.innerHTML="0";
                goodsTotalPrice.innerHTML="0";
            }
        }
    </script>
</head>
<body>
<h5>你的购物车信息：</h5>
商品图片：<br><img src="https://img-blog.csdn.net/20170112193814201?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbXlkcmVhbWhvcGU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="坚果大礼包图片" title="坚果大礼包"><br>
商品名称：<span></span><br>
商品单价：<span></span><br>
商品数量：<span></span><br>
商品总价：<span></span><br>

</body>
</html>

小松鼠绅士

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
对cookie的简单运用

// 将JSON对象转成JSON字符串 var objStr = JSON.stringify(obj); // JSON字符串赋值给cookie document.cookie = objStr; // 创建cookie var cookie = document.cookie; // 将JSON字符串转成JSON对象
复制链接

扫一扫