cookie的跨页面传值问题仿购物车案例

大家都知道cookie的特性, cookie生效在同一个域名下,cookie储存量有限,cookie主要用于记录用户的一些信息,例如记录用户的登录信息使用户一段时间内不用登录,它有服务器创建,并放在客户端。

跨页面传值定义:统指WEB页面之间的传值,包括简单的页面表单传值和页面程序中的变量传值

以下仿写cookie的跨页面传值问题仿购物车案例,把list界面选定的数值跳转带到shopCar界面。

list界面:

<!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小清新玫瑰感化客厅装饰花瓶</h4>
                    <h3>售价:18</h3>
                </div>
                <input type="button" id="buy" value='立即购买'>
                <input type="button" id='add' value='增加'>
                <input type="button" id='reduce' value='减少'>
            </div>

            <div class="car">
                <span class='num' id='num'>0</span>
            </div>

        </div>
    </body>
</html>

shopCar界面:

<!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='你没有选中任何商品';
            setTimeout(function(){
                window.location.href='list.html'

            },1000)

        }else{

            oDiv.innerHTML='我知道我要买'+num+'束漂亮的花朵!!心情美美哒!!!'+'<img src="images/2.png">';

        }
    }
    </script>
</html>

封装的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)
    }

}

效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python小屋

Python使用tkinter打造自定义对话框完整代码

问题来源:前一阵发过一个技术文章Python编写抽奖式随机提问程序,其中有个弹出式对话框,好像上海科技大学宋老师在群里当时问了一句对话框中中奖姓名是否能显示的大...

58940
来自专栏向治洪

React Native在Android平台运行gif的解决方法

概述 目前RN在Android平台上不支持gif格式的图片,而在ios平台是支持的,期待以后的版本中系统也是可以默认支持Android的。首先说下在ios平台怎...

27260
来自专栏阮一峰的网络日志

React 入门实例教程

现在最热门的前端框架,毫无疑问是 React 。 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度...

43970
来自专栏向治洪

React Native在Android平台运行gif的解决方法

概述 目前RN在Android平台上不支持gif格式的图片,而在ios平台是支持的,期待以后的版本中系统也是可以默认支持Android的。首先说下在ios平台怎...

40550
来自专栏数据小魔方

数据地图系列9|excel(VBA)数据地图!

今天要跟大家分享的是数据地图系列的第九篇——excel(VBA)数据地图! 关于VBA在excel中的应用非常广泛,本篇仅仅是给出示例代码,不会对基础操作做太过...

59460
来自专栏非著名程序员

基础篇章:关于 React Native 之 ListView 组件的讲解

? (友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 我们讲完ScrollView组件,其实...

20980
来自专栏老司机的简书

老司机读书笔记——Weex学习笔记

Weex整体上与Vue语法大概一直,基本用法由阿里进行二次封装。以下主要介绍Weex的一些内置组件。

38040
来自专栏hightopo

基于 HTML5 Canvas 的工控机柜 U 位动态管理

31640
来自专栏偏前端工程师的驿站

WebComponent魔法堂:深究Custom Element 之 面向痛点编程

前言  最近加入到新项目组负责前端技术预研和选型,一直偏向于以Polymer为代表的WebComponent技术线,于是查阅各类资料想说服老大向这方面靠,最后得...

21950
来自专栏熊二哥

Bootstrap快速入门

Bootstrap学习有两个重点,一个是概念的理解,理解bootstrap是如何通过div来代替过去的table布局的;一个是常用结构的熟悉,做到需要的组件及时...

56160

扫码关注云+社区

领取腾讯云代金券