html-cookie

html-cookie

what

  1. “cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。” - w3school
  2. 从JavaScript的角度看，cookie 就是一些字符串信息。这些信息存放在客户端的计算机中，用于客户端计算机与服务器之间传递信息。
  3. 由于 cookie 多用在客户端和服务端之间进行通信，所以除了JavaScript以外，服务端的语言也可以存取 cookie。

浏览器参数

Name Value Domain Path Expires/Max Age Size HttpOnly Secure SameSite SameParty Priority

大小

cookie 是有大小限制的，每个 cookie 所存放的数据不能超过4kb，如果 cookie 字符串的长度超过4kb，则该属性将返回空字符串。

生命周期

  1. 默认情况下，cookie 在浏览器关闭时删除
  2. 如果想要 cookie 能在浏览器关掉之后还可以使用，就必须要为该 cookie 设置有效期，也就是 cookie 的失效日期。
  3. expires（以 UTC 或 GMT 时间）
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

路径 - path

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

  1. 默认情况下，只有与创建 cookie 的页面在同一个目录或子目录下的网页才可以访问
  2. 这个是因为安全方面的考虑，造成不是所有页面都可以随意访问其他页面创建的 cookie。

rules

  • 设置cookie——js设置path要以"/"开头，比如html路径为"/zt/20160623/",路径可以设置成"/"或"/zt"。
  • 获取cookie——使用js只能获取path大于等于当前页面path的cookie，比如html路径为/zt/20160623/,使用js只能获取“/zt/20160623/”和“/zt”和“/”路径下的cookie。不能获取其他路径下的cookie
  • 删除cookie——删除cookie的时候路径也必须相同，默认的路径是html的path路径。
  • 错误——如果path不是以"/"开头的则创建cookie的path使用默认的path；如果是以"/"开头但是设置错了，路径名不存在或者直接设置成子路径。比如设置成"/20160623"或者"/zt1",该cookie将不会被创建，并且后续对cookie的操作不论正确与否都会被浏览器禁止。

example

在 "http://www.xxx.com/xxx/" 这个页面创建一个cookie，那么在"/xxx/"这个路径下的页面如： "http://www.xxx.com/xxx/archive/2011/11/07/Cookie.html"这个页面默认就能取到cookie信息。
可在默认情况下， "http://www.xxx.com"或者 "http://www.xxx.com/xxxx/" 就不可以访问这个 cookie
那么如何让这个 cookie 能被其他目录或者父级的目录访问类，通过设置 cookie 的路径就可以实现。

document.cookie = "name=value;path=http://www.xxx.com"
document.cookie = "name=value;expires=date;path=http://www.xxx.com/xxxx/"

最常用的例子就是让 cookie 在跟目录下,这样不管是哪个子页面创建的 cookie，所有的页面都可以访问到了

　document.cookie = "name=Darren;path=/"

路径能解决在同一个域下访问 cookie 的问题

域 - domain

  1. 因为浏览器是个注意安全的环境，所以不同的域之间是不能互相访问 cookie 的(当然可以通过特殊设置的达到 cookie 跨域访问)。

同域之间访问

document.cookie = "name=value;path=path;domain=[domain]"

rules

  • 设置cookie——设置cookie的时候，domain要符合域名的规则，比如可以设置成www1.pclady.com.cn和pclady.com.cn 但是不能设置成pclady。要有.com.cn或者其他域名做结尾。 通过js手动设置cookie的domain都是以.开头的。比如设置domain=pclady.com.cn,实际的domain名为.pclady.com.cn；删除cookie时加不加.都可以。
  • 获取cookie——js只能获取domian大于等于当前页面域名的cookie。比如http://www1.pclady.com.cn/zt/20160623/testCookie.html页面中的js能获取domain为“www1.pclady.com.cn”和“.www1.pclady.com.cn”和“.pclady.com.cn”但是获取不到“g.pclady.com.cn”中的cookie；
  • 删除cookie——要删除一个cookie，domain值必须跟要删除cookie的domain相同，默认的domain为html文件的domain。
  • 跨域domain——js不可以把cookie设置成不同与html域名的domian。cookie设置不会成功，但不会影响后面程序对cookie的操作。
  • 错误——如果domain设置错误，该cookie将不会被创建，并且后续对cookie的操作不论正确与否都会被浏览器禁止。

example

例如 "www.qq.com" 与 "sports.qq.com" 公用一个关联的域名"qq.com"，我们如果想让 "sports.qq.com" 下的cookie被 "www.qq.com" 访问，我们就需要用到 cookie 的domain属性，并且需要把path属性设置为 "/"。例：

document.cookie = "username=Darren;path=/;domain=qq.com"

注：一定的是同域之间的访问，不能把domain的值设置成非主域的域名。

安全性 - secure

通常 cookie 信息都是使用HTTP连接传递数据，这种传递方式很容易被查看，所以 cookie 存储的信息容易被窃取。假如 cookie 中所传递的内容比较重要，那么就要求使用加密的数据传输。

　　所以 cookie 的这个属性的名称是“secure”，默认的值为空。如果一个 cookie 的属性为secure，那么它与服务器之间就通过HTTPS或者其它安全协议传递数据。语法如下：

document.cookie = "username=Darren;secure"

把cookie设置为secure，只保证 cookie 与服务器之间的数据传输过程加密，而保存在本地的 cookie文件并不加密。如果想让本地cookie也加密，得自己加密数据。

　注：就算设置了secure 属性也并不代表他人不能看到你机器本地保存的 cookie 信息，所以说到底，别把重要信息放cookie就对了

js 操作

创建/修改

document.cookie="username=John Doe";
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

// Error 只能单条创建
document.cookie="key1=value;key2=value;"; // key1=value;

修改 cookie 类似于创建 cookie，旧的 cookie 将被覆盖。

读取

document.cookie

document.cookie 将以字符串的方式返回所有的 cookie，类型格式：

cookie1=value; cookie2=value; cookie3=value;

删除

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:

删除时不必指定 cookie 的值。

document.cookie = "username=;";
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

常见问题

类型

  1. 当前网站本身设置的 cookie
  2. 网页上嵌入广告或图片等其他域来源的 第三方 cookie (网站可通过使用这些 cookie 跟踪你的使用信息)

状态

  1. 临时性质
    浏览器关闭后这些信息也会从计算机中删除
  2. 失效时间
    浏览器关闭了，这些信息业依然会在计算机中。如 登录名称和密码，这样无须在每次到特定站点时都进行登录。这种cookie 可在计算机中保留几天、几个月甚至几年

清除方式

  1. 浏览器工具清除 cookie (有第三方的工具，浏览器自身也有这种功能)
  2. 设置 cookie 的有效期来清除 cookie
    注：删除 cookie 有时可能导致某些网页无法正常运行

else

  1. 浏览器设置来接受和拒绝访问 cookie。
  2. 出于功能和性能的原因考虑，建议尽量降低 cookie 的使用数量，并且要尽量使用小 cookie。
  3. 本地磁盘中的页面，chrome的控制台是无法用JavaScript读写操作 cookie 的，解决办法...换一个浏览器
  4. 要删除一个cookie，domain和路径必须完全相同。
  5. 页面能访问那些cookie跟从哪里引入js没有关系。而跟html页面本身的domain和path有很直接的关系

名/值对形式存储

  • typeof document.cookie = string

document.cookie 属性看起来像一个普通的文本字符串，其实它不是。

  1. 即使在 document.cookie 中写入一个完整的 cookie 字符串, 当您重新读取该 cookie 信息时，cookie 信息是以名/值对的形式展示的。
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/"; // 'username=John Doe';
  1. 设置了新的 cookie，旧的 cookie 不会被覆盖。 新 cookie 将添加到 document.cookie 中，所以如果您重新读取document.cookie，您将获得如下所示的数据：
document.cookie="key1=value1;"; // key1=value1;
document.cookie="key2=value2;"; // key1=value1;key2=value2;

查找一个指定 cookie 值，您必须在 cookie 字符串中查找 cookie 值。

特殊符号处理

在输入cookie信息时不能包含空格，分号，逗号等特殊符号，而在一般情况下，cookie 信息的存储都是采用未编码的方式。所以，在设置 cookie 信息以前要先使用escape()函数将 cookie 值信息进行编码，在获取到 cookie 值得时候再使用unescape()函数把值进行转换回来。

这样就不用担心因为在cookie值中出现了特殊符号而导致 cookie 信息出错了。

　　document.cookie = name + "="+ escape (value)
    // getCookie()
　return unescape(document.cookie.substring(c_start,c_end))

uitls

        function setCookie(cname, cvalue, days) {
            var expires = ''
            if (days) {
                var d = new Date();
                d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
                expires = "expires=" + d.toGMTString();
            }
            document.cookie = cname + "=" + escape(cvalue) + "; " + expires;
        }
        function getCookie(cname) {
            if (document.cookie.length == 0)
                return ''
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i].trim();
                if (c.indexOf(name) == 0) { return unescape(c.substring(name.length, c.length)); }
            }
            return "";
        }
        function getCookie1(c_name) {
            if (document.cookie.length > 0) {　　//先查询cookie是否为空，为空就return ""
                c_start = document.cookie.indexOf(c_name + "=")　　//通过String对象的indexOf()来检查这个cookie是否存在，不存在就为 -1　　
                if (c_start != -1) {
                    c_start = c_start + c_name.length + 1　　//最后这个+1其实就是表示"="号啦，这样就获取到了cookie值的开始位置
                    c_end = document.cookie.indexOf(";", c_start)　　//其实我刚看见indexOf()第二个参数的时候猛然有点晕，后来想起来表示指定的开始索引的位置...这句是为了得到值的结束位置。因为需要考虑是否是最后一项，所以通过";"号是否存在来判断
                    if (c_end == -1) c_end = document.cookie.length
                    return unescape(document.cookie.substring(c_start, c_end))　　//通过substring()得到了值。想了解unescape()得先知道escape()是做什么的，都是很重要的基础，想了解的可以搜索下，在文章结尾处也会进行讲解cookie编码细节
                }
            }
            return ""
        }
        function checkCookie(key) {
            var value = document.cookie
            if (key)
                value = getCookie(key)
            if (value && value != "") {
                alert((key || 'Cookie') + ':' + value);
            } else {
                value = prompt("请输入" + (key || 'Cookie') + '：', "");
                if (value != "" && value != null) {
                    setCookie(key || value, value);
                }
            }
        }
posted @ 2021-10-14 17:50  zc-lee  阅读(638)  评论(0)  编辑  收藏  举报