js - cookie

Posted 2020-08-21 只要闪电降临 就会有跳舞的火焰

【cookie】
Cookies 是一些数据, 存储于你电脑上的文本文件中。
当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。
Cookies 的作用就是用于解决 "如何记录客户端的用户信息":
    当用户访问 web 页面时，他的名字可以记录在 cookie 中。
    在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。
Cookies 以名/值对形式存储，如下所示:
username=yehui

当浏览器从服务器上请求 web 页面时， 属于该页面的 cookies 会被添加到该请求中。服务端通过这种方式来获取用户的信息。
cookie 用来识别用户。
什么是cookie：cookie是存储于访问者的计算机中的变量，每当同一台计算机通过浏览器请求页面时，就会发送这个cookie，可以使用javascript来创建和取回cookie的值。

在开发过程中会遇到的cookie问题：
1）当访问者首次访问页面时，他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时，他们会收到类似 "Welcome John Doe!" 的欢迎词。而名字则是从 cookie 中取回的。
2）当访问者首次访问页面时，他或她也许会填写他/她们的密码。密码也可被存储于 cookie 中。当他们再次访问网站时，密码就会从 cookie 中取回。
3）当访问者首次访问你的网站时，当前的日期可存储于 cookie 中。当他们再次访问网站时，他们会收到类似这样的一条消息："Your last visit was on Tuesday August 11, 2005!"。日期也是从 cookie 中取回的。

创建cookie：
JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookies。

document.cookie="username=yehui";

您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

document.cookie="username=yehui; expires=Thu, 18 Dec 2013 12:00:00 GMT";

您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

document.cookie="username=yehui; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

获取cookie：
在 JavaScript 中, 可以使用以下代码来读取 cookies：
var x = document.cookie;

document.cookie// 将以字符串的方式返回所有的 cookies，类型格式： cookie1=value; cookie2=value; cookie3=value;

 

修改cookie：
在 JavaScript 中，修改 cookies 类似于创建 cookies，如下所示：

document.cookie="username=yehui; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

旧的 cookie 将被覆盖。
注意，当您删除时不必指定 cookie 的值。

一个欢迎词的cookie：

<script type="text/javascript">
        document.cookie="userId=828;path=‘/‘";
        document.cookie="userName=yehui;path=‘/‘";
        var strCookie=document.cookie;
        alert(strCookie); 
        //创建cookie
        function setcookie(name,value,exdays){
            var date = new Date();
            date.setTime(date.getTime()+(exdays*24*60*60*1000));
            var expires = "exdays=" +date.toGMMTString();
            document.cookie = name+ "=" +value+";"+expires;
        }

        //获取cookie
        function getcookie(name){
            var myname = name + "=";
            var ca = document.cookie.split(";");
            for(var i = 0; i<ca.length; i++){
                var c = ca[i].trim();//去掉字符串首尾空格。 
                if(c.indexOf(myname) == 0){
                    return c.substring(myname.length,c.length);
                }
            }
            return "";
        }

        //检测cookie
        function checkcookie(){
            var user = getcookie("username");
            if(user != ""){
                alert("欢迎再次回来" + user);
            }else{
                user = prompt("请输入你的名字：","");//用于显示可提示用户进行输入的对话框
                if(user != "" && user != null){
                    setcookie("username", user, 30);
                }
            }
        }
    </script>