JS使用Cookie

最新推荐文章于 2023-01-04 10:23:14 发布
最新推荐文章于 2023-01-04 10:23:14 发布
阅读量1k 收藏
点赞数
分类专栏： 计算机网络 文章标签： cookie 服务器 web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jlin991/article/details/55803576
版权

0. Cookie概念

定义

记录服务器与客户端之间的状态，最早用来判断用户是否第一次访问网站。

现在已经是识别用户，实现持久会话的较好方式。 它定义了一些新的HTTP首部。

作用

Cookies的作用就是用于解决“如何记录客户端的用户信息”
当用户访问web页面时，它的名字可以记录在cookie中，当下一次访问时可以
在cookie中读取用户的访问记录。

Cookie的类型
  • 会话cookie
    会话cookie是一种临时cookie，记录了用户访问站点的设置和偏好preference。 用户退出浏览器时，会话cookie就被删除了。
  • 持久cookie
    持久cookie是存储在硬盘上的，浏览器退出后，计算机重启时它们仍然存在。持久cookie维护某个用户周期性访问的信息，比如登录名。
Cookie的本质

Cookie本质就是一个名值对构成的字符串。
一般是以下这些信息构成:
名称 ：需要被URL编码，不区分大小写
值 ：必须被URL编码
域： 对哪个域是有效的。默认就是发送cookie的那个域
路径: 对于指定域中的那个路径。 比如指定了
http://www.wrox.com/books , 那么
http://www.wrox.com的页面就不会发送cookie！~

失效时间(过期时间): 何时被删除的时间戳。默认是浏览器关闭时候所有cookie删除。 这个值是一个GMT格式的时间 （Wdy,DD-Mon-YYYY HH:MM:SS GMT）
安全标志 指定后，cookie只有在使用SSL连接的时候才发送到服务器。

HTTP response示例：

HTTP/1.1 200 OK
Content-type:text/html
Set-Cookie:name=value; expire=Mon,22-Jan-07 07:10:24 GMT; domain=.wrox.com; path=/;secure

值得注意的是：域 路径 失效时间 secure标志都是服务器给浏览器的指示，指定何时发送cookie。这些参数不会作为发送给服务器的cookie信息的一部分，只有名值对会发送！
Secure是唯一一个非名值对的。

客户端存储的cookie示例
如： 

Cookie: NOWCODERUID=7CAEE918A9211F1F5B3D8DB4913496AB; t=1204D82E035A9BD09D0AA90A96DBA998; NOWCODERCLINETID=CBD2F59F5E8C7B7403269B5E9E1BEAC7; CNZZDATA1253353781=155670659-1487244501-https%253A%252F%252Fwww.nowcoder.com%252F%7C1487472599; SERVERID=aff739a092fc0d444b24c3a30d4864b6|1487477718|1487244493

持久Cookie和会话cookie的区别其实就是过期时间不同。 一般是Expire或Max_Age来决定。

Cookie的局限
  1. IE6或更低版本最多20个cookie
  2. IE7和之后的版本最后可以有50个cookie。
  3. Firefox最多50个cookie
  4. chrome和Safari没有做硬性限制，
    IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。
  5. cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节。

1.COOKIE处理：

服务器向客户端发Cookie
COOKIE处理：
A. 服务器向客户端发Cookie
例如：

HTTP/1.1 200 OK
Content-type:text/html
Set-Cookie:name=value
Other-header:other-header-value

B 浏览器将Cookie保存
C 每次浏览器会将Cookie发到服务器端
例如：

GET /index.html HTTP/1.1
Cookie:name=value
Other-header:other-header-value

如下图：
这里写图片描述
我们的Web服务器会通过HTTP扩展首部 Set-Cookie或Set-Cookie2 把cookie贴到每个用户上。
浏览器会存储从服务器返回的Set-Cookie中的内容，并将cookie存储在浏览器的cookie文件夹中。也就是说会存储在硬盘上。

IE对Cookie的处理

IE将cookie存储在高速缓存目录下独立的文本文件中。可以在硬盘中查看到。
这里写图片描述

IE特有的cookie格式文件

CNZZDATA3258975
cnzz_eid%3D958325568-1466428170-http%253A%252F%252Fwww.cnki.net%252F%26ntime%3D1473251452
adp.cnki.net/
1600
3240902912
30578703
2587134064
30542091
*

Cookie一个接一个地存储在文件中，每个cookie由多行构成。
名字 CNZZDATA3258975
值 cnzz_eid%3D958325568-1466428170-http%253A%252F%252Fwww.cnki.net%252F%26ntime%3D1473251452
域/路径 adp.cnki.net/

不同web站点使用不同的cookie

浏览器中可能有成百上千的cookie，但浏览器不会把每个cookie都发给所有的站点！ 也就是说哪个站点产生的cookie，就会发送给哪个。
这就是所谓的绑定域名，设定了一个cookie后，再给创建它的域名发送请求时都会包含这个cookie~

原因：

  • 对所有cookie进行传输会严重降低性能。浏览器实际传输的cookie字节数比实际内容字节数多！
  • cookie中包含的是服务器特有的名值对，大部分站点来说，大多数cookie没有意义
  • 将所有的cookie发送给所有站点会引发潜在的隐私问题，那些你不信任的站点也会获得其他站点的信息。

例如： joes-hardware.com 产生的cookie只会发送给joes-hardware.com，不会发送给baidu.com

2.客户端JS操作Cookie

document.cookie=”username=John doe”;
创建cookie
可以添加一个过期时间，默认是浏览器关闭时删除
您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。
例如：

document.cookie="username=John doe;expire=Thu, 18 Dec 2013"

读取Cookie

var x=document.cookie;
var ca=x.split(";");

修改cookie :
document.cookie=”xx” 就会自动覆盖旧的cookie了

var x=document.cookie;
x="ID=223;exire="THU,18,DEC 2015";
//常用用法
document.cookie=cname+"="+cvalue+": "+expires;

查询cookie

function checkCookie(){
    var user=getCookie("username");
    if(user!=""){
        alert("Welcome again"+user);
    }
    else{
        user=prompt("Please enter your name:","");
        if(user!=""&&user!=null){
            setCookie("username",user,30);
        }
    }
}

封装操作
写一个CookieUtil对象来包含这些处理
注意，其实BOM提供了专门的函数decodeURIComponent和encodeURICompoent来URL编码和URL解码！

document.cookie解释：
当用来获取属性值时，返回当前页面可用的(根据cookie的域、路径、失效时间和安全设置) 所有cookie字符串。 由分号分隔。

当用来设置时，设置一个新的cookie字符串，不会覆盖，只会被解释并添加到现有的cookie集合中。
除非设置的cookie名称已经存在。

代码：

var CookieUtil={
    get:function(name){
        var cookieName=encodeURIComponent(name)+"=",
            cookieStart=document.cookie.indexOf(";"+cookieName),
            cookieValue=null;
        if(cookieStart>-1){
            var cookieEnd=document.cookie.indexOf(";",cookieStart); //;cookieStart 的index
            if(cookieEnd==-1){
                cookieEnd=document.cookie.length;
            }
            cookieValue=decodeURIComponent(document.cookie.substring(cookieStrart+cookieName.length,cookieEnd ));
        }

        return cookieValue;
    },

    set:function(name,value,expires,path,domain,secure){
        var cookieText=encodeURIComponent(name)+"="+encodeURIComponent(value);
        if(expires instanceof Date){//instanceof
            cookieText+="; expires="+expires.toGMTString();
        }
        if(path){
            cookieText+="; path="+path;
        }
        if(domain){
            cookieText+="; domain="+domain;
        }
        if(secure){
            cookieText+="; secure"
        }
        document.cookie=cookieText;
    },
    unset:function(name,path,domain,secure){
        this.set(name,"",new Date(0),path,domain,secure);
    }
}

解释：
get()方法根据cookie的名字获取相应的值。它会在document.cookie字符串中查找cookie名加上”=” 的位置。 如果找到了，使用indexOf查找该位置之后第一个分号。 如果没有找到分号，就说明这个cookie是字符串最后一个， 则余下的字符串都是cookie的值。 用decodeURIComponent解码并返回。

set()方法很简单，接收前面介绍的几个参数值。除了值以外的都是可选的。 名值进行了URL编码。其他就是添加 分号 和本身的关键字。

删除没有直接方法，我们只能使用unset，它的原理是设置 相同的路径，域，和安全选项再次设置cookie，并将过期时间设置为过去的时间！
new Date(0) 就是 1970年1月1日返回的值。

子cookie

为了突破浏览器单域名下的cookie数量的限制，使用子cookie。 它就是存放下单个cookie下的跟小段的数据。 就是使用cookie值来存放多个名值对！
如：
name=name1=value1&name2=value2&name3=value3
子cookie以查询字符串的格式进行格式化。 这些值可以使用单个cookie进行存储和访问！ 但是注意的是全部cookie的大小仍然限制在4KB。

var SubCookieUtil={
    get:function(name,subName){
        var subCookies=this.getAll(name);
        if(subCookies){
            return subCookies[subName];
        }else{
            return null;
        }
    },
    // name=value;  cookieStart就是 name=   cookieEnd就是 value;
    getAll:function(name){
        var cookieName=encodeURIComponent(name)+'=',
            cookieStart=document.cookie.indexOf(cookieName),
            cookieValue=null,
            cookieEnd,
            subCookies,
            i,
            parts,
            result={};

        if(cookieStart>-1){
            cookieEnd=document.cookie.indexOf(";",cookieStart);
            if(cookieEnd==-1){
                cookieEnd=document.cookie.length;
            }
            cookieValue=document.cookie.substring(cookieStart+cookieName.length,cookieEnd);
            if(cookieValue.length>0){
                subCookies=cookieValue.split("&");
                for(i=0,len=subCookies.length;i<len;i++){
                    parts=subCookies[i].split("=");
                    result[decodeURIComponent(parts[0])]=decodeURIComponent(parts[1]);
                }
                return result;
            }
        }
    }
    return null;
};

对于获取子cookie。 其中get()方法获取单个子cookie的值，getAll（)获取所有子cookie。
get()方法其实就是调用getAll（）获取所有的子cookie，返回所需的那个。不存在就返回null。

而getAll()方法和CookieUtil.get()方法相似关键是 先根据&解析每个子cookie并放到一个数组中，然后对于每个子cookie再根据=分割。 这样在parts数组中前一部分就是cookie名字后一部分就是cookie值。 

var SubCookieUtil={
    get:function(name,subName){
        var subCookies=this.getAll(name);
        if(subCookies){
            return subCookies[subName];
        }else{
            return null;
        }
    },
    // name=value;  cookieStart就是 name=   cookieEnd就是 value;
    getAll:function(name){
        //URL编码，其实就是对一些特殊字符进行转码！例如把中文"你好"
        //转成 %e4%bd%a0%e5%a5%bd 百分号的形式
        var cookieName=encodeURIComponent(name)+'=',
            cookieStart=document.cookie.indexOf(cookieName),
            cookieValue=null,
            cookieEnd,
            subCookies,
            i,
            parts,
            result={};

        if(cookieStart>-1){
            //找到cookie的后面部分，从cookieStart开始搜索
            cookieEnd=document.cookie.indexOf(";",cookieStart);
            if(cookieEnd==-1){
                //是否为末尾，为-1就是末尾,没找到。
                cookieEnd=document.cookie.length;
            }
            cookieValue=document.cookie.substring(cookieStart+cookieName.length,cookieEnd);
            if(cookieValue.length>0){
                //先分割出每一个子cookie
                subCookies=cookieValue.split("&");
                for(i=0,len=subCookies.length;i<len;i++){
                    parts=subCookies[i].split("=");
                    result[decodeURIComponent(parts[0])]=decodeURIComponent(parts[1]);
                }
                return result;
            }
        }
        return null;
    },
//设置子cookie
    set:function(name,subName,value,expires,path,domain,secure){
        var subcookies=this.getAll(name)||{};
        subcookies[subName]=value;
        this.setAll(name,subcookies,expires,path,domain,secure);
    },

    setAll:function(name,subcookies,expires,path,domain,secure){
        var cookieText=encodeURIComponent(name)+"=",
            subcookiesParts=[],
            subName;
        for(subName in subcookies){
            if(subName.length>0&&subcookies.hasOwnProperty(subName)){
                subcookiesParts.push(encodeURIComponent(subName)+"="+
                        encodeURIComponent(subcookies[subName]));
            }
        }
        if(subcookiesParts.length>0){
            cookieText+=subcookiesParts.join("&");
            if(expires instanceof Date){
                cookieText+="; expires="+expires.toGMTString();
            }
            if(path){
                cookieText+="; path="+path;
            }
            if(domain){
                cookieText+="; domain"+domain;
            }
            if(secure){
                cookieText+="; secure";
            }
        }else{
            //设置一个过期时间
            cookieText+="; expires="+(new Date(0)).toGMTString();
        }

        document.cookie=cookieText;
    }

};

注意，上面的所有这些可选参数都是作用于整个cookie本身，而非单个子cookie。 为了在同一个cookie中存储多个子cookie，这些标志都必须一致的。
set方法，第一步是获取指定cookie的名称对应的所有子cookie。 || 可以在当getAll返回null的时候为subcookies设置一个新的对象。 然后在subcookies对象上设置好子cookie值并传给setAll() 接收6个参数，可以设置名值以及其他可选参数。 使用for in遍历subcookies中的属性。注意for in 会枚举包括原型链上的属性，所以加了hasOwnProperty来保证只有实例属性被序列化到子cookie中。
注意 由于可能存在属性名为空字符串的情况，还要检查一下属性名的长度。
将每个子cookie的名值对都存入subcookiesParts数组中，然后用join方法连接并存到cookieText中

删除子cookie

    unset:function(name,subName,path,domain,secure){
        var subcookies=this.getAll(name);//subcookie name
        if(subcookies){
            delete subcookies[subName];
            this.setAll(name,subcookies,null,path,domain,secure);
        }
    },

    unsetAll:function (name,path,domain,secure) {
        // body...
        // new Date(0)
        this.setAll(name,null,new Date(0),path,domain,secure);
    }

注意删除子cookie是不能直接将cookie的失效时间设置为过去的时间。 为了删除一个子cookie必须获取包含在某个cookie中的所有子cookie，然后仅删除需要删除的那个子cookie，然后再将余下的子cookie值保存为cookie的值。
unset 用于删除某个cookie中的单个子cookie。
unsetAll用于删除整个cookie

三 cookie的思考

还有一类称为 HTTP专有cookie。 这种cookie只能被从服务器读取，可以在浏览器或者服务器设置，因为JS无法获取HTTP专有cookie的值。
缺点

  • 所有的cookie都会由浏览器作为请求头发送。 cookie信息越大，完成对服务器请求的时间就越长。
  • Cookie数量和长度的限制。每个domian最多20条cookie，每个cookie长度最多不超过4KB，所以尽管你使用子cookie还是不能突破这个长度限制。 超过的会被截掉
  • 安全性问题，cookie被人拦截了，它就可以获取所有的session信息。 即使加密也没办法。因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
  • 有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。
xxxspade
关注
专栏目录
js操作cookie
03-05
测试页面 博文链接：https://callan.iteye.com/blog/161777
js使用cookie实现记住用户名功能示例
12-10
本文实例讲述了js使用cookie实现记住用户名功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...
JavaScript 操作 Cookie
weixin_33857679的博客
11-24 309
　　从事web开发也有些日子了，cookie 是个啥差不多能说明白，可是实际自己一上手操作就是得去搜索(你们懂的)，结果被鄙视了...所以就写一篇博文做为自己的学习笔记，嘿嘿，博客的好处在此体现出来了。   　　什么是 Cookie 　　“cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创...
javascript基础：访问cookie数据
weixin_30363981的博客
02-08 132
访问cookie数据非常简单，都是通过document.cookie来实现的： （1）存储：document.cookie = strCookie （2）读取：strCookie = document.cookie 下面的代码只能在IE浏览器运行，因为IE浏览器允许本地文件设置cookie数据，而chrome浏览器不支持本地文件访问cookie，把代码嵌入在网站代码内，验证通过，且一直能保存...
JS中如何使用cookie
weixin_42255265的博客
12-03 7223
最近在项目接触了很多在js中调用保存的cookie，是别人在项目的utils.js中保存了不少cookie。大多数保存的是当前登录的用户，和当前的系统，各种常用的id。 1、cookie是什么： ①、cookie 是存储于访问者计算机中的变量。每当一台计算机通过浏览器来访问某个页面时，那么就可以通过 JavaScript 来创建和读取 cookie。 　　②、实际上 cookie 是存于用户硬盘...
Javascript访问Cookie的四个常用方法
weixin_30824479的博客
11-23 101
Javascript访问Cookie的四个基本方法无论是在创建页面还是构建对象都会使用到，单独拿出来备用：// utility function called by getCookie()function getCookieVal(offset) { var endstr = document.cookie.indexOf (";", offset); if (endstr == -1) {...
JavaScript使用cookie
10-31
### JavaScript 使用 Cookie 的深入解析 #### 一、Cookie 概述及应用场景 在现代Web开发中，**Cookie** 是一种非常重要的技术，它允许开发者在客户端（即用户的计算机上）存储少量的数据。通过使用Cookie，开发者...
JS使用cookie保存用户登录信息操作示例
12-02
本文实例讲述了JS使用cookie保存用户登录信息。分享给大家供大家参考，具体如下： 通常cookie和session，是web开发中用于存储信息的对象，session存在于服务器的内存中，而cookie则是存在客户端，所以js可以直接操作...
js-cookie的使用
热门推荐
weixin_52615140的博客
01-04 1万+
关于js-cookie的那些事，js-cookie的使用
js 设置和调用Cookie
侯文轩 程序员专栏
06-28 397
最近总是遇到js调用或设置Cookie的问题,分享下js设置和调用Cookie函数:// set Cookie function setCookie(c_name,value,expiredays){ var exdate=new Date() exdate.setDate(exdate.getDate()+expiredays) document.c
JS设置cookie和获取cookie 方法
09-11
js写的方法，可以设置cookie和获取cookie值，简单易懂
JS操作Cookie,子键(增删改查)纯js页面
08-25
当需要用cookie来存储大量数据的时候，用前台js来控制cookie, 然后异步调用后台执行一些数据库操作，实现页面无刷新。
如何 JS 中使用 cookie
Jay的博客
01-08 500
关于Javascript使用cookie的常用方法，以及关于cookie的path和domain的作用讲解。
js使用cookie
weixin_34342992的博客
12-13 82
原文地址:http://www.maoyupeng.com/use-cookie-on-javascript.html cookie存储中文乱码问题 使用js期间,如果存储的数据存在中文,则可能会遇到兼容性的问题.我先说说我遇到的问题(不要心急,在后面会提供完整的代码案例): 在安卓的手机上使用微信打开我的测试网页,存储中文没有问题,一...
js-cookie中文文档
岁月如歌去，十年弹指间
09-30 6156
js-cookie是一个简单的，轻量级的处理cookies的js API。 API 创建 //创建简单的cookie Cookies.set('name', 'value'); //创建有效期为7天的cookie Cookies.set('name', 'value', { expires: 7 }); //为当前页创建有效期7天的cookie Cookies.set('name', 'v...
【JavaScript】Cookie的使用
懂得一千零一种,赋予你失败的方法！
05-20 490
文章目录Cookie一、概述二、作用三、官方文档3.1 通过 JavaScript 创建 cookie3.2 通过 JavaScript 读取 cookie3.3 通过 JavaScript 改变 cookie3.4 通过 JavaScript 删除 cookie3.5 Cookie 字符串四、简单使用4.1 添加4.2 查询4.3 设置过期时间 Cookie 一、概述 Cookie是会话技术的一种，主要用于将会话过程产生的数据保存到客户端（浏览器），从而使客户端每次和服务端之间可以更好的进行交互。 我.
javascript 调用cookies
weixin_30500663的博客
03-23 119
cookie 用来保存信息，并且与服务器互动，因此前端后端都可以使用cookie 值得一提的是:虽然cookie是以文件的形式存储在客户端的电脑上， 　 但浏览器只会让创建cookie的网站访问自己的cookie 下面实验以表单为例子 用户:<input type="text" id="user"/><br /&...
js中cookie的使用
FavoriteStudent的博客
06-22 1611
cookie概述cookie是浏览器提供的一种机制，它将document对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制，而并不是JavaScript本身的性质。cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用。因此，cookie可以跨越一个域名下的多个网页，但不能跨域多个域名使用。不同的...
js调用cookie
当下的七炎
11-01 204
setcookie("name", "Alex Porter", time()+3600);?>-->function getCookie(name){  var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));  if(arr != null) return unescape(arr[2]);   ret
nestjs 使用cookie
最新发布
06-15
NestJS是一个基于TypeScript的开源Web框架，它在Express之上构建，提供了丰富的... 在每个需要保护的路由或控制器前，使用`@UseGuards(JwtAuthGuard)`装饰器，NestJS会自动在每次请求头中查找`jwt` cookie并解码验证。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值