HtTTP cookie 也称为 cookie
,中文翻译过来就是曲奇、小甜饼的意思。最初用于在客户端存储会话信息。cookie 在浏览器中,通常以键值对的形式存储
。
cookie 既然是用来存储会话信息的,就是说,他是和服务器之间建立的会话
。
在浏览器某一个网站应用发起一个请求
的时候,服务器会在响应的HTTP 请求
时,通过创建一个set-cookie
的头部信息,告诉客户端,需要将set-cookie 包含的键值对存储起来
,这个就是cookie的由来。
其中 HTTP 响应头格式如下所示,cookie 的键值对为name=value
HTTP/1.1200 OK
Content-type: text/html
Set-Cookie: name=value
Other-header: other-header-value
当下一次这个网站请求服务器接口的时候,浏览器就是将cookie 对应的值添加到请求中,这样服务器通过cookie ,就知道是哪一个客户端发起的请求,cookie用于标识客户端
cookie 受同源策略限制
,其与特定的域名绑定的,不能跨源使用。cookie 在浏览器创建的时候,就和客户端所对应的URL (协议、端口,域名)绑定,其他的域名不能使用这个cookie、
除了同源策略的限制外,cookie本身能存储的信息也受限制,还有以下规则
如果某些域超过了这些限制的上限
,浏览器会删除之前的cookie
。有些浏览器随机删除,有些会将最少使用的删除。
cookie 整体有以下的部分构成
名称:名称不区分大小写
值:以字符串形式存储值
域
cookie有效的域,表明cookie只能作用与这个域,发送到这个域的所有请求都包含对应的cookie。可以设置成包含子域
,默认是不包含
。
路径
请求URL地址包含这个路径
才会把cookie发送到服务器
,例如指定cookie 只能有http://www.a/book/ 访问,因此访问http://www.a/ 不会发送cookie
,即使是一个域
。
过期时间
表示将在什么时候,这个cookie 将会失效,被删除
。超过这个时间戳,就不会发送浏览器。默认情况下
,浏览器结束回话后,会删除所有cookie
,不过,可以设置cookie 的有效时间
,这个值为GMT格式(Wdy,DD-MM-YYYY HH:SS GMT),即使关闭回话,没有超过这个时间
,cookie 都是存在客户端的
。
安全标志
设置之后,只有使用SSL安全连接的情况下,才会把cookie 发送到服务器。请求https协议会
。而http不会
设置格式如下:
HTTP/1.1200 0K
Content-type: text/html
Set-Cookie:name=value;expires=Mon,22Jan-0707:10:24GMT;domain=.wrox.com;path =/;secure;
Other-header: other-header-value
JavaScript 可以通过 document.cookie 来设置cookie
如下面的代码:
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
// 使用示例:设置一个名为"username"的cookie,值为"JohnDoe",有效期为30天
setCookie("username", "JohnDoe", 30);
也可以通过JavaScript来获取cookie
:
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
// 使用示例:获取名为"username"的cookie值
var username = getCookie("username");
console.log(username); // 输出:"JohnDoe"
document.cookie 的是以;作为分隔符存储起来的字符串,因此需要使用循环来判断。
通过设置cookie 的HTTPOnly
,可以达到防止JavaScript 操作和访问cookie,只能用于服务器回话。
例如在响应头设置成这样即可。
"Set-Cookie", "cookiename=value;
Path=/;Domain=domainvalue;Max-Age=seconds;HTTPOnly"
除了cookie 能存储信息外,浏览器还提供了 Web Storage 给开发者存储本地信息。Web Storage 包含 localStorage
和 sessionStorage
两个对象。
其中localStorage 与sessionStorage 有所区别,下面具体说明一下:
sessionStorage 对象只能存储会话数据,没有过期时间限制,这意味着关闭浏览器就会失效。其有以下的特点
刷新或者重新加载页面
,浏览器仍然会保留当前会话的sessionStorage
。新浏览器
窗口和标签复制浏览器URL
,都会新建一个会话
,不共享
sessionStorage关闭对应的浏览器标签或窗口
,会清除
对应的sessionStorage// 保存数据到 sessionStorage
sessionStorage.setItem("key", "value");
// 从 sessionStorage 获取数据
let data = sessionStorage.getItem("key");
// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem("key");
// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();
localStorage 是永久性本地存储
,除非手动移除
,否则会一直存储在浏览器中,即使是关闭浏览器。
他允许开发者访问当前源的本地存储对象
,不能跨源共享
。
localStorage.setItem("myCat", "Tom");
//该语法用于读取 localStorage 项,如下
let cat = localStorage.getItem("myCat");
//该语法用于移除 localStorage 项,如下:
localStorage.removeItem("myCat");
// 移除所有
localStorage.clear();
localStorage与 sessionStorage 都没有过期时间限制
,其中sessionStorage 只能在当前会话窗口或标签生效,关闭后则失效,localStorage为永久性存储。
localStorage 只能被当前源访问
,不能跨源
只能在当前源生效
,但cookie 可以通过·domain 设置其他源共享
。