对cookie的简单运用

来源：互联网发布：网络信息管理岗位职责编辑：程序博客网时间：2024/06/03 02:49

提交订单页面：

<!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="http://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="http://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