javascript--Cookie的使用、案例刀塔传奇_createcookie(key, value, expires)-CSDN博客

本文链接：https://blog.csdn.net/u012054869/article/details/51734576

Cookie的使用
1、定义：是一种以文件（Cookie文件）的形式保存用户数据信息。
2、写入Cookie
格式：document.cookie="关键字=值[;expires=有效时间]"
例子：

//存cookie
    function saveCookie(key, content) {
        //             "zhang" "123"
        var today = new Date();
        var exptime = new Date();
        var scond = 24 * 60 * 60 * 1000 * 5;
        exptime.setTime(today.getTime() + scond);
        document.cookie = key + "=" + content + ";expires = " + exptime.toGMTString();
        //document.cookie = zhang = 123 ;expires =  + exptime.toGMTString();
    }
    saveCookie("zhang","123"); //document.cookie = zhang = 123;1天
    saveCookie("xin","456");

2、删除Cookie
格式：document.cookie="关键字=;expires=当前日期"
例子：

//删除cookie
    function clearCookie(Key) {
        var today = new Date();
        document.cookie = Key + "=;expires=" + today.toGMTString();
        //document.cookie = zhang =  // 现在
    }
   clearCookie("zhang");

3、读取Cookie
格式：document.cookie;
例子：

function readCookie(Key) {
        var name = Key+"=";// zhang=
        var str = document.cookie;//"zhang=123; xin=456"
        var arr = str.split(";");// ["zhang=123"," xin=456"];
        for (var n = 0; n < arr.length; n++) {
            var stu = arr[n].trim();//"zhang=123"
                //"zhang=123"
            if (stu.indexOf(name)==0) {
                return stu.substr(name.length);//"zhang=     123"
            }
        }
    }

    document.write(document.cookie);

4、实现一个水果选择游戏、水果选择页面
屏幕上显示6个水果，每个水果前有一个选框、并且有一个按钮“确认”，点击以后判断
（1）限制用户只能选择3个
（2）超过3个，提示错误
（3）如果成功选择3个英雄，跳转另一个页面
（4）另一个页面接收这三个值，并显示
方法一：（直接使用cookie）
选择页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cookie游戏</title>
</head>
<body>
<form name="gamelist">
    <input type="checkbox" name="ids" value="0">苹果
    <input type="checkbox" name="ids" value="1">香蕉
    <input type="checkbox" name="ids" value="2">草莓
    <input type="checkbox" name="ids" value="3">火龙果
    <input type="checkbox" name="ids" value="4">葡萄
    <input type="checkbox" name="ids" value="5">西瓜

    <input type="button" name="sure" value="确认">
    <input type="reset" value="重置">
</form>
<script>

    //获取选中的value值

    function createcookie(key,value){
        var today=new Date();
        var futureday=new Date();
        var days=24*3600*1000*3;
        futureday.setTime(today.getTime()+days);
        document.cookie=key+"="+value+";expires="+futureday.toGMTString();
    }
    //点击事件function fun()不可以
    document.gamelist.sure.onclick=function(){
        var select =document.gamelist.ids;
        var str="";
        for(var n=0;n<select.length;n++){
            if(select[n].checked){
                str=str+select[n].value+",";//忘了加value
            }
        }

        var arr = str.split(",");
        arr.pop();
        if (arr.length <= 3) {
            for(var n=0;n<arr.length;n++){
            }
            createcookie("zhang",str);
            window.location.href="cookie-show.html";//跳转页面

        }else {
            alert("最多只能选择三个！");
            window.location.reload();
        }
    }
</script>
</body>
</html>

跳转页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>游戏展示页面</title>
</head>
<body>
<script>
    var gamearr=["苹果","香蕉","草莓","火龙果","葡萄","西瓜"];
    //document.write(document.cookie);
    function readcookie(key) {
        var name = key + "=";
        var cookie = document.cookie;
        var arr = cookie.split(";");//cookie输出都是以;隔开
        for (var n = 0; n < arr.length; n++) {
            var newarr = arr[n].trim();//去空格
            if (newarr.indexOf(name) == 0) {
                return newarr.substr(name.length);
            }
        }
    }
    readcookie("zhang");
    //alert(readcookie("zhang"));
    var lastarr=readcookie("zhang").split(",");
    lastarr.pop();
    var str="";
    for(var n=0;n<lastarr.length;n++){
        str=str+gamearr[lastarr[n]];
    }
    document.write(str);

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

方法二：（直接document.write跳转第二个页面）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提交限制数组长度</title>
</head>
<body>
<form name="city">
    <input type="checkbox" name="skin" value="0">朝阳
    <input type="checkbox" name="skin" value="1">通州
    <input type="checkbox" name="skin" value="2">昌平
    <input type="checkbox" name="skin" value="3">海淀
    <input type="checkbox" name="skin" value="4">东城

    <input type="button" onclick="fun()" value="确认">
    <input type="reset" value="重置">
</form>

<script>
    var city = ["朝阳", "通州", "昌平", "海淀", "东城"];
    var select = document.city.skin;
    var str = "";
    function fun() {
        for (var n = 0; n < select.length; n++) {
            if (select[n].checked) {
                str = str + city[n] + ",";
            }
        }
        //document.write(str);
        var arr = str.split(",");
       ///document.write(arr.length);
        arr.pop();
        if (arr.length <= 3) {
            for(var n=0;n<arr.length;n++){
        }
            document.write(arr);
        }else {
            alert("最多只能选择三个！");
            window.location.reload();
        }
    }
</script>
</body>
</html>