javascript--Cookie的使用、案例刀塔传奇

川长思鸟来 2022-09-21 13:26 116阅读 0赞

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;  
例子：

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>