Js操作浏览器Cookie

时间:2024-03-22 21:01:35

Cookie的产生

Web应用程序是使用HTTP协议传输数据的,HTTP协议是无状态协议,指协议对于交互没有记忆能力,浏览器与服务器的每一次交互都是新的。
为了使WEB应用程序在页面之间共享数据和记录用户状态,最早有两个解决方案Cookie和Sesstion:

  • Cookie以文本格式存储在客户端;
  • Sesstion存储在服务端。

Cookie是网景公司发明的,服务器端向浏览器发送Cookie,浏览器将Cookie保存,浏览器能够获取到Cookie,之后在浏览器与服务器交互时浏览器都会将cookie发送给服务器端。

这样使浏览器与服务器交互有了记忆功能,比如常用的用户登录状态,购物车等都可以存储在客户端。

Cookie是什么

Cookie是一小段存储在浏览器端的文本信息。
Cookie像是浏览器与服务器之间的一种默契,如果把浏览器与服务器的交互看成买卖的话,Cookie很像会员卡,发卡的是服务器,用卡的是浏览器,浏览器拿到卡之后每次消费都会携带着卡片,直到卡片过期。
服务器发的卡片有两种类型,一次作废的卡,一定期限的卡。如果设置了使用期限就是一定期限的卡,没设置了使用期限就是一次作废的卡。

所有的主流浏览器如IE、Netscape、Firefox、Opera等都支持Cookie,不同的浏览器对cookie的数目和大小的限制不同。一般来说每个web服务器(域名)保存的cookie数不能超过50个,每个cookie保存的数据不能超过4KB。

在Chrome浏览器中查看Cookie
Js操作浏览器Cookie

  • 一个Cookie包含若干个字段,格式就是键值对
    以Chrome浏览器为例,在开发者工具的Application->Storage->Cookies查看当前域的Cookie:
    Js操作浏览器Cookie

浏览器中的Cookie主要由以下几部分组成:

  • Name(名称)
    Cookie唯一的名称,必须经过URL编码处理。
  • Value(值)
    Cookie值,必须经过URL编码处理。
  • domain(域)
    Cookie来自哪个域名。默认情况下cookie在当前域下有效,你也可以设置该值来确保对其子域是否有效。
  • path(路径)
    指定Cookie在哪些路径下有效,默认是当前路径下、/表示对整个树有效。
  • Expires/Max-Age(失效时间)
  • 默认情况下,浏览器会话结束时会自动删除Cookie;也可以设置一个GMT格式的日期,指定具体的删除日期;如果设置的日期为以前的日期,那么Cookie会立即删除。
  • secure(安全标志):指定之后只允许Cookie发送给https协议。指示浏览器只使用安全传输连接的服务器返回Cookie,应用在对于安全要求较高的地方,比如网上交易等。

通过document.cookie能够获取当前网站下的cookie,得到的是字符串的形式的值,它包含了
当前网站下的所有cookie,这些cookie通过一个分号+空格的形式串联起来。Js操作浏览器Cookie

Cookie的传输

Cookie会自动在web浏览器和web服务器之间传输,发送HTTP请求时,会把保存在该请求域名下的所有Cookie值发送给web服务器,服务器端脚本可以读、写存储在客户端的cookie。
浏览器在发送请求时,只会将名称与值添加到请求头的Cookie字段中,发送给服务端。

发送cookie

服务器端像客户端发送Cookie是通过HTTP响应报文实现的,在Set-Cookie中设置需要像客户端发送的cookie,cookie格式如下:

Set-Cookie: “name=value;domain=.domain.com;path=/;expires=Sat, 11 Jun 2016 11:29:42 GMT;HttpOnly;secure”

Cookie的存储

按照在客户端中的存储位置,可分为内存Cookie和硬盘Cookie。内存Cookie由浏览器维护,保存在内存中,浏览器关闭后就消失了,其存在时间是短暂的。

Cookie存储遵循“同源策略”

同一站点的不同页面之间是可以互相共享存储数据;不同站点的页面无法互相读取对方存储数据。

Cookie的有效期

采用临时存储可以让数据保存至当前窗口关闭或者浏览器退出;
采用永久存储,可以将数据永久地存储到硬盘上,永不失效。

操作浏览器Cookie

获取Cookie

设置Cookie

删除Cookie

五、网站性能优化
Cookie在服务端和浏览器的通信中,主要依靠HTTP的响应头和请求头传输的,所以Cookie会占据一定的带宽。

前面提到浏览器会为每一次HTPP请求自动携带上Cookie信息,但是对于同站内的静态资源,服务器并不需要处理其携带的Cookie,这无形中便浪费了带宽。

在最佳实践中,一般都会将静态资源部署到独立的域名上,从而可以避免无效Cookie的影响。

我们可以在浏览器上保存任何文本,而且我们还可以随时随地的去阻止它或者删除。我们同样也可以禁用或者编辑cookie,但是有一点需要注意不要使用cookie来存储一些隐私数据,以防隐私泄露

添加与覆盖: 浏览器用cookie名称来区别cookie,添加不同名称cookie会一直续在前一个cookie后,同名的cookie会覆盖值。

删除cookie: 不能直接删除cookie,但是设置过期日期为过去,浏览器会删除cookie。

中文及特殊字符支持: 使用escape()函数编码cookie值,读取时使用unescape()函数解码。

判断cookie是否存在: document.cookie.indexOf(NameOfCookie+“=”); //使用字符串函数indexOf

例:document.cookie=“str=”+escape(“I love ajax”);相当于document.cookie=“str=I%20love%20ajax”;