js中的cookie使用和vue-cookie的使用

在HTTP协议的定义中,采用了一种机制来记录客户端和服务器端交互的信息,这种机制被称为cookie,cookie规范定义了服务器和客户端交互信息的格式、生存期、使用范围、安全性。

 

在JavaScript中可以通过 document.cookie 来读取或设置这些信息。由于 cookie 多用在客户端和服务端之间进行通信,所以除了JavaScript以外,服务端的语言(如PHP)也可以存取 cookie。

 

Cookie详解

 

Cookie在远程浏览器端存储数据并以此跟踪和识别用户的机制。从实现上说,Cookie是存储在客户端上的一小段数据,浏览器(即客户端)通过HTTP协议和服务器端进行Cookie交互。

 

Cooke独立于语言存在,严格地说,Cookie并不是由PHP、Java等语言实现的,而是由这些语言对Cookie进行间接操作,即发送HTTP指令,浏览器收到指令便操作Cookie并返回给服务器。因此,Cookie是由浏览器实现和管理的。举例说,PHP并没有真正设置过Cookie,只是发出指令让浏览器来做这件事。PHP中可以使用setcookie() 或 setrawcookie() 函数设置Cookie。setcookie()最后一个参数HttpOnly设置了后,JavaScript就无法读取到这个Cookie。

 

设置Cookie时需注意:①函数有返回值,false失败,true成功,成功仅供参考,不代表客户端一定能接收到;②PHP设置的Cookie不能立即生效,要等下一个页面才能看到(Cookie从服务器传给浏览器,下个页面浏览器才能把设置的Cookie传回给服务器);如果是JavaScript设置的,是立即生效的;③Cookie没有显示的删除函数,可以设置expire过期时间,自动触发浏览器的删除机制。

 

Cookie是HTTP头的一部分,即现发送或请求Cookie,才是data域;setcookie()等函数必须在数据之前调用,这和header() 函数是相同的。不过也可以使用输出缓冲函数延迟脚本的输出,知道设置好所有Cookie和其他HTTP标头。

 

Cookie通常用来存储一些不是很敏感的信息,或者进行登录控制,也可用来记住用户名、记住免密码登录、防止刷票等。每个域名下允许的Cookie是有限制的,根据浏览器这个限制也不同。Cookie不是越多越好,它会增加宽带,增加流量消耗,所以不要滥用Cookie;不要把Cookie当作客户端的存储器来用。一个域名的每个Cookie限制以4千字节(KB)键值对的形式存储。

 

还有一种Cookie是Flash创建的,成为Flash Shard Object,又称Flash Cookie,即使清空浏览器所有隐私数据,这类顽固的Cookie还会存在硬盘上,因为它只受Flash管理,很多网站采用这种技术识别用户。

 

Cookie跨域,主要是为了统一应用平台,实现单点登录;需使用P3P协议(Platform for Privacy Preferences),通过P3P使用户自己可以指定浏览器的隐私策略,达到存储第三方Cookie的目的,只需要在响应用户请求时,在HTTP的头信息中增加关于P3P的配置信息就可以了。Cookie跨域涉及两个不同的应用,习惯上称为第一方和第三方。第三方通常是来自别人的广告、或Iframe别的网站的URL,这些第三方网站可能使用的Cookie。

 

Cookie格式

 

Cookie中保存的信息都是文本信息,在客户端和服务器端交互过程中,cookie信息被附加在HTTP消息头中传递,cookie的信息由键/值对组成。下面是一个HTTP头中cookie的例子:

 

Set-Cookie: key = value; Path=/

 

Cookie中存放的信息包含cookie本身属性和用户自定义属性,一个cookie只能包含一个自定义键/值对。Cookie本身属性有”Comment” 、”Domain”、”Max-Age”、”Path”、”Secure”、”Version”。

 

Comment 属性是cookie的产生着对该cookie的描述;

 

Domain 属性定义可访问该cookie的域名,对一些大的网站,如果希望cookie可以在子网站中共享,可以使用该属性。例如设置Domain为 .bigsite.com ,则sub1.bigsite.com和sub2.bigsite.com都可以访问已保存在客户端的cookie,这时还需要将Path设置为/。

 

Max-Age 属性定义cookie的有效时间,用秒计数,当超过有效期后,cookie的信息不会从客户端附加在HTTP消息头中发送到服务端。

 

Path 属性定义网站上可以访问cookie的页面的路径,缺省状态下Path为产生cookie时的路径,此时cookie可以被该路径以及其子路径下的页面访问;可以将Path设置为/,使cookie可以被网站下所有页面访问。

 

Secure 属性值定义cookie的安全性,当该值为true时必须是HTTPS状态下cookie才从客户端附加在HTTP消息中发送到服务端,在HTTP时cookie是不发送的;Secure为false时则可在HTTP状态下传递cookie,Secure缺省为false。

 

Version 属性定义cookie的版本,由cookie的创建者定义。

 

Cookie的创建

 

Cookie可以在服务器端创建,然后cookie信息附加在HTTP消息头中传到客户端,如果cookie定义了有效期,则本保存在客户端本地磁盘。保存cookie的文件是一个文本文件,因此不用担心此文件中的内容会被执行而破坏客户的机器。支持Web端开发的语言都有创建cookie的方法或函数,以及设置cookie属性和添加自定义属性的方法或函数,最后是将cookie附加到返回客户端的HTTP消息头中。

 

创建cookie时如果不指定生存有效时间,则cookie只在浏览器关闭前有效,cookie会在服务器端和客户端传输,但是不会保存在客户机的磁盘上,打开新的浏览器将不能获得原先创建的cookie信息。

 

Cookie信息保存在本地时会保存到当前登录用户专门目录下,保存的cookie文件名中会包含创建cookie所在页面网站的域名,当浏览器再次连接该网站时,会从本机cookie存放目录下选出该网站的有效cookie,将保存在其中的信息附加在HTTP消息头中发送到服务器端,服务器端程序就可根据上次保存在cookie的信息为访问客户提供“记忆”或个性化服务。

 

Cookie除了可以在服务器端创建外,也可以在客户端的浏览器中用客户端脚本(如javascript)创建。客户端创建的cookie的性质和服务器端创建的cookie一样,可以保存在本地,也可以被传送到服务器端被服务器程序读取。

 

Cookie 基础知识

 

  1. cookie 是有大小限制的,大多数浏览器支持最大为 4096 字节的 Cookie(具体会有所差异,可以使用这个好用的工具:http://browsercookielimits.squawky.net/ 进行测试);如果 cookie 字符串的长度超过最大限制,则该属性将返回空字符串。

  2. 由于 cookie 最终都是以文件形式存放在客户端计算机中,所以查看和修改 cookie 都是很方便的,这就是为什么常说 cookie 不能存放重要信息的原因。

  3. 每个 cookie 的格式都是这样的:cookieName = Vaue;名称和值都必须是合法的标示符。

  4. cookie 是存在 有效期的。在默认情况下,一个 cookie 的生命周期就是在浏览器关闭的时候结束。如果想要 cookie 能在浏览器关掉之后还可以使用,就必须要为该 cookie 设置有效期,也就是 cookie 的失效日期。

  5. alert(typeof document.cookie)结果是 string.

  6. cookie 有域和路径这个概念。域就是domain的概念,因为浏览器是个注意安全的环境,所以不同的域之间是不能互相访问 cookie 的(当然可以通过特殊设置的达到 cookie 跨域访问)。路径就是routing的概念,一个网页所创建的 cookie 只能被与这个网页在同一目录或子目录下得所有网页访问,而不能被其他目录下得网页访问(这句话有点绕,一会看个例子就好理解了)。

  7. 其实创建cookie的方式和定义变量的方式有些相似,都需要使用 cookie 名称和 cookie 值。同个网站可以创建多个 cookie ,而多个 cookie 可以存放在同一个cookie 文件中。

  8. cookie 存在两种类型:①:你浏览的当前网站本身设置的 cookie ②来自在网页上嵌入广告或图片等其他域来源的 第三方 cookie (网站可通过使用这些 cookie 跟踪你的使用信息)

  9. cookie 有两种清除方式:①:通过浏览器工具清除 cookie (有第三方的工具,浏览器自身也有这种功能) ②通过设置 cookie 的有效期来清除 cookie.注:删除 cookie 有时可能导致某些网页无法正常运行。

  10. 浏览器可以通过设置来接受和拒绝访问 cookie。出于功能和性能的原因考虑,建议尽量降低 cookie 的使用数量,并且要尽量使用小 cookie。

 

Cookie的使用

 

从cookie的定义可以看到,cookie一般用于采用HTTP作为进行信息交换协议的客户端和服务器端用于记录需要持久化的信息。一般是由服务器端创建要记录的信息,然后传递到客户端,由客户端从HTTP消息中取出信息,保存在本机磁盘上。当客户端再次访问服务器端时,从本机磁盘上读出原来保存的信息,附加到HTTP消息中发送给服务器端,服务器端从HTTP消息中读取信息,根据实际应用的需求进行进一步的处理。

 

服务器端cookie的创建和再次读取功能通常由服务器端编程语言实现,客户端cookie的保存、读取一般由浏览器来提供,并且对cookie的安全性方面可以进行设置,如是否可以在本机保存cookie。

 

由于cookie信息以明文方式保存在文本文件中,对一些敏感信息如口令、银行帐号如果要保存在本地cookie文件中,最好采用加密形式。

 

与cookie类似的另一个概念是会话(Session),会话一般是记录客户端和服务器端从客户端浏览器连接上服务器端到关闭浏览器期间的持久信息。会话一般保存在内存中,不保存到磁盘上。会话可以通过cookie机制来实现,对于不支持cookie的客户端,会话可以采用URL重写方式来实现。可以将会话理解为内存中的cookie。

 

使用会话会对系统伸缩性造成负面影响,当服务器端要在很多台服务器上同步复制会话对象时,系统性能会受到较大伤害,尤其会话对象较大时。这种情况下可以采用cookie,将需要记录的信息保存在客户端,每次请求时发送到服务器端,服务器端不保留状态信息,避免在服务器端多台机器上复制会话而造成的性能下降。

 

Cookie 基本操作

 

对于 Cookie 得常用操作有,存取,读取,以及设置有效期;具体可以参照 JavaScript 操作 Cookie 一文;但,近期在前端编码方面,皆以Vue为冲锋利器,所以就有用到一款插件 vue-cookie,其代码仅30行,堪称精妙,读取操作如下:

 

set: function (name, value, days) {

    var d = new Date;

    d.setTime(d.getTime() + 24*60*60*1000*days);

    window.document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();

},

get: function (name) {

    var v = window.document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');

    return v ? v[2] : null;

},

delete: function (name) {

    this.set(name, '', -1);

}

 

cookie 域概念

 

路径能解决在同一个域下访问 cookie 的问题,咱们接着说 cookie 实现同域之间访问的问题。语法如下:

 

document.cookie = “name=value;path=path;domain=domain“

 

红色的domain就是设置的 cookie 域的值。例如 “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的值设置成非主域的域名。

 

cookie 安全性

 

通常 cookie 信息都是使用HTTP连接传递数据,这种传递方式很容易被查看,在控制台下运行document.cookie,一目了然;所以 cookie 存储的信息容易被窃取。假如 cookie 中所传递的内容比较重要,那么就要求使用加密的数据传输。所以 cookie 的这个属性的名称是“secure”,默认的值为空。如果一个 cookie 的属性为secure,那么它与服务器之间就通过HTTPS或者其它安全协议传递数据。语法如下:

 

document.cookie = “username=Darren;secure”

 

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

 

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

转载于:https://www.cnblogs.com/zhaopanpan/p/9275227.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/264264.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

asp上传错误:此键已与该集合的一个元素关联

在做一个图片上传的时候,提示“此键已与该集合的一个元素关联”,错误是出现在无组件上传的文件里。 查了一下原来是由于提交数据的页面中出现了页面控件重名的问题,可能是页面中用到的多选项同名引起的,虽然报错,但不影…

spring-在配置文件中配置DAO时直接引用DataSource

一、创建spring项目 项目名称:spring101306二、在项目上添加jar包 1.在项目中创建lib目录 /lib 2.在lib目录下添加spring支持 commons-logging.jar junit-4.10.jar log4j.jar mysql-connector-java-5.1.18-bin.jar …

计算机基础知识总结及自学,计算机基础知识的简单总结

我说明一下,本文只是基于作者的个人理解所作出的总结,如果有什么不对的地方,希望大家给我指正,我会尽快更正的。我也想通过51cto这个大平台,能够与大家一同学习,一同交流,一同进步。1.计算机的组…

【转载】网络流和最小费用流

这段时间复习了下网络流模型,感觉比以前的理解有了长足进展,虽然我知道这东西难就难在建模上,而它的算法本身其实难度不大,但我还是决定说一些我的理解,毕竟理解了本质的东西运用起来才会更灵活。最大流的求解一般有两…

实验1.1

转载于:https://www.cnblogs.com/P201821430028/p/10689308.html

札记__ADT:URL,Lua:strlen方法

2019独角兽企业重金招聘Python工程师标准>>> 01,Android ADT 在线更新的URL: https://dl-ssl.google.com/android/eclipse/ 02,Lua中字符串长度的判断可以使用 # local str "abcabc" print(#str) --6 print(#"a…

vue路由添加.html,怎么使用VueRouter的addRoutes方法实现动态添加用户的权限路由

怎么使用VueRouter的addRoutes方法实现动态添加用户的权限路由发布时间:2021-04-26 13:34:44来源:亿速云阅读:76作者:小新小编给大家分享一下怎么使用VueRouter的addRoutes方法实现动态添加用户的权限路由,希望大家阅读…

vue中的适配:px2rem

这应该是vue项目在适配移动端时候,最简单的方法之一下面是基本步骤(使用cnpm)1.下载并引入lib-flexible cnpm install --save lib-flexible 在main.js中 :import ‘lib-flexible/flexible’2.引入px2rem-loader cnpm install --sa…

SQL Server 2005参考:Apply运算符

SQL Server 2005参考:Apply运算符 使用 APPLY 运算符可以为实现查询操作的外部表表达式返回的每个行调用表值函数。表值函数作为右输入,外部表表达式作为左输入。通过对右输入求值来获得左输入每一行的计算结果,生成的行被组合起来作为最终输…

Java高级篇 -- List选择及优化

为什么80%的码农都做不了架构师?>>> 在java编程中,我们常常使用到java自带的集合类List 以下为几点简单的优化建议: 1.Vector还是ArrayList Vector有其特有有点,其每个方法都为同步方法【synchronized】&#xff0c…

韶关无线电厂台式计算机,中国芯片30年的历史 它背后有哪些不为人知的故事?...

1972年,自主研制的大规模1973年,北京大学、北京有线电厂等单位联合研制150计算机,该机字长数48位,运算能力达每秒100万次,主要用于石油、地质、气象和军事部门。1973年,韶关市无线电厂研制成功晶体管161型“…

Java————迷宫问题

它表示一个迷宫,其中的1表示墙壁,0表示可以走的路,只能横着走或竖着走,不能斜着走,要求编程序找出从左上角到右下角的最短路线。 package algorithm_java;import java.util.Scanner; import java.util.Stack;/*** 路径…

PB中函数测试遇到的问题

在PB中写了一个函数,需要连接两个数据库 tr_1,tr_2,测试时报错(无法连接到第二个数据库),再确定该函数代码没有其它问题后,选中该函数,右键Regenerate后,测试成功.转载于:https://ww…

每一件事情的开始总是很困难的!

每一件事情的开始总是很困难的!我今天花了一下午的时间终于把开头做完了,希望底下的事情,顺顺当当的!转载于:https://blog.51cto.com/7305256/1564904

html双翼布局,第19题 CSS如何实现双飞翼布局?

双飞翼布局如下图所示:有了圣杯布局的铺垫,双飞翼布局也就问题不大啦。这里采用经典的float布局来完成。HTML代码:双飞翼布局码云笔记mybj123.comCSS代码:*{margin: 0;padding: 0;}.container {min-width: 600px;}.left {float: l…

使用IE WebControls中的TabStrip控件和MultiPage控件实现选项卡式风格页面(转载)

第一步: 首先必须安装Internet Explorer WebControls.原始安装下载地址是:http://asp.net/IEWebControls/Download.aspx 下载后可以按照说明进行安装。 也可以下载下面这个我做的简易安装包,下载地址是:http://files.cnblogs.com/…

【原】关于AdaBoost的一些再思考

一、Decision Stumps: Decision Stumps称为单层分类器,主要用作Ensemble Method的组件(弱分类器)。一般只进行一次判定,可以包含两个或者多个叶结点。对于离散数据,可以选取该属性的任意一个数据作为判定的…

计算机系统时间无法更改,电脑时间不能修改|系统时间改不了 四个处理办法

电脑时间不能修改|系统时间改不了 四个处理办法?电脑时间不但可以让网友准确的查看时间,还对软件的运行、工作等方面至关重要,有时大家看电脑时间不准确想要修改,确发现改不了系统时间。碰到该故障的朋友不要惊慌,下面…

PHP常用字符串函数小结

最近面试被这个面到吐血,特地来fork一些。 来源:https://www.jb51.net/article/145084.htm 一、判断类型的函数 is_bool() //判断是否为布尔型 is_float() //判断是否为浮点型 is_real() //同上 is_int() //判断是否为整型 is_integer() //同…

醒来。。

很久没更新我的博客,缘由有二:其一,博客没人看,没有写下去的动力。其二:真的没啥东西可以写。。。 今天,一如既往地沉睡三小时后,醒了,还是带着无限的忧郁和惆怅,这次唯一…