[关闭]
@yangfch3 2015-12-05T10:01:54.000000Z 字数 4922 阅读 3755

Javascript and Cookie

JavaScript


HTTP 连接是无状态连接,没有记忆功能。服务端在无其他措施的情况下,无法记住同一客户端的前次的请求,也无法识别特定的不同用户。

每次会话都是全新的。


以一次登陆 Github 的角度分析 Cookie 作用的全过程:

  1. 打开 Github,未登录之前,打开 Network 界面,查看首页 Request HeaderCookie 信息:

    1. Cookie:logged_in=no; _gh_sess=eyJzZXNzaW9uX2lkIjoiZDk0NzYzMTIxYzNiNTk3ZjNkMzFhZjM2OTJlZmIxNDMiLCJfY3NyZl90b2tlbiI6IllWaEs2Q3UvNmxObFQwQnU5R0pqcTNPOWhiZU9HMkVmS2dpbWpvOUh6ZEk9In0%3D--d3f50c5a83a5f5bf3766564ddc4bbf5d8f70f832; _octo=GH1.1.797316355.1449214528; _ga=GA1.2.202017092.1449214528; _gat=1; tz=Asia%2FShanghai

    里面很清晰地可以看到:logged_in=no;

  2. 登陆后再次查看首页的请求头Cookie 信息

    1. Cookie:_octo=GH1.1.797316355.1449214528; _gat=1; logged_in=yes; dotcom_user=yangfch3; user_session=L-H83S3FP-km8Y4qcOgjDZxWaNxTWfhRH-Cmsgu--09GleIvVmFC0Ca2iYIY_R7EZOrz66z6rMKdlvUV; _gh_sess=eyJsYXN0X3dyaXRlIjoxNDQ5MjE0NjcyMTk5LCJzZXNzaW9uX2lkIjoiN2YyYzExYTM4OGQ3ZTZiNWNkNTQ4YmM1ZGVmZDg1YjUiLCJjb250ZXh0IjoiLyIsImZsYXNoIjp7ImRpc2NhcmQiOlsiYW5hbHl0aWNzX2xvY2F0aW9uIl0sImZsYXNoZXMiOnsiYW5hbHl0aWNzX2xvY2F0aW9uIjoiL2Rhc2hib2FyZCJ9fX0%3D--4c5443839a61e148dd7eaba11d0fa4d52285c311; _ga=GA1.2.202017092.1449214528; tz=Asia%2FShanghai

    此时可以看到键值对:logged_in=yes;dotcom_user=yangfch3;...

  3. 查看首页的响应头setCookie 信息

    1. Set-Cookie:user_session=TOaMilSO3HrprRwMgUB5c-BhvWfWzdX3q6949y8BZJIxagvxVmGV4-J6eWN9_EsEaxMZHsx_Piogt_SR; path=/; expires=Fri, 18 Dec 2015 13:32:19 -0000; secure; HttpOnly
  4. 我们再查看一下其他资源(例如图片、CSS、JS...)的 Cookie,例如:octocat_setup.png

    1. Cookie:_octo=GH1.1.797316355.1449214528; _gat=1; logged_in=yes; dotcom_user=yangfch3; _ga=GA1.2.202017092.1449214528
  5. 点击某个与个人有关的链接,这回我们看页面响应头Cookie 信息以及页面请求头setCookie 信息:

    1. Set-Cookie:_gh_sess=eyJsYXN0X3dyaXRlIjoxNDQ5MjE0NjcyMTk5LCJzZXNzaW9uX2lkIjoiN2YyYzExYTM4OGQ3ZTZiNWNkNTQ4YmM1ZGVmZDg1YjUiLCJjb250ZXh0IjoiLyIsInNweV9yZXBvIjoieWFuZ2ZjaDMvTGVhcm4tTW9kZXJuaXpyLURlbW8iLCJzcHlfcmVwb19hdCI6MTQ0OTIxNTI4MiwiZmxhc2giOnsiZGlzY2FyZCI6WyJhbmFseXRpY3NfbG9jYXRpb24iXSwiZmxhc2hlcyI6eyJhbmFseXRpY3NfbG9jYXRpb24iOiIvPHVzZXItbmFtZT4vPHJlcG8tbmFtZT4ifX19--5f567b45e73dd027cd9be4b244cfc85db2b33d95; path=/; secure; HttpOnly
    2. Set-Cookie:user_session=L-H83S3FP-km8Y4qcOgjDZxWaNxTWfhRH-Cmsgu--09GleIvVmFFMvrZj6Kj2YAMywmqTBJA9bcPlPFw; path=/; expires=Fri, 18 Dec 2015 07:48:02 -0000; secure; HttpOnly

登陆过程详解:

  1. 打开 github.com 登录页,浏览器寻找本机 Cookie ;如果能找到,则把 Cookie 写入请求头,再向服务器发起请求,如果未在本机上找到对应网站的 Cookie ,则直接发起请求
  2. 服务器接收到请求(Request),检查请求头(request header)有无 Cookie 信息:
    • 无:返回登陆界面,由用户填写表单,接下来进入 ③ (正是示例中的情况)
    • 有:根据 Cookie 解析出来的用户信息,为用户返回定制化的个人首页
  3. 用户填写好表单,发送到服务器进行验证;服务器根据用户提交的表单,核对数据库中的信息,返回根据用户信息的定制化主页,同时服务器产生 Cookie ,写入返回的主页的响应头(response header
  4. 浏览器接收到定制化主页后,将该站点 Cookie 存入特定的文件区域,方便下次访问调取
  5. CookiesetCookie 分别反应在请求头响应头

从上,我们可知道 Cookie 的一些明显特征:


Cookie 是文档 document 的一个属性,存储在 documentCookie 属性内,本质是字符串,同时也是浏览器通过 Javascript 可以操控的一个对象。

· 形式

键值对,name:value 形式,分号隔开,最多存储20对 name:value 键值对

· 可选属性
· 优缺点
  1. 优点
    • 持久性
    • 方便保存访问信息和用户状态
    • 实现个性化定制
  2. 缺点
    • 无法跨浏览器共享
    • 安全性问题,容易被利用
· 保存路径

chromeCookie 保存路径:

C:\Users\YFCODE\AppData\Local\Google\Chrome\User Data\Default

一般浏览器都可以进行注册表 Cookie 禁用、全局 Cookie 禁用,或者针对特定站点的 Cookie 禁用


  1. var txt = "logged=yes;user=yangfch3;";
  2. document.cookie = txt;
  3. // 并不会覆盖原来的 Cookie ,只是会自动添加到原 Cookie 的后面
  1. var cookieString = document.cookie;
  2. // "user=yangfch3; logined=yes; bdshare_firstime=1449300282369"
  1. function readCookie(){
  2. var cookieString = decodeURI(document.cookie); // 或用 toString();
  3. var cookieArr = cookieString.split(";");
  4. for(x in cookieArr){
  5. cookieArr[x] = cookieArr[x].split("=");
  6. }
  7. return cookieArr;
  8. }
  9. // [["user","yangfch3"],["logined","yes"],["bdshare_firstime","1449300282369"]]

删除一个 Cookie 的方法是:将 Cookie 过期时间(expirse)设为过去的一个时间,使得 Cookie 过期失效,从而实现删除

  1. function deleteCookie(){
  2. var date = new Date();
  3. date.setTime(date.getTime()-10000000); // 设定一个过去的时间
  4. document.cookie = "expires=" + date.toGMTString();
  5. }

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注