一、概述
- cookie总是保存在客户端中（浏览器端）。
- cookie为了保存sessionID出现的。
- cookie的出现解决了http无状态的问题。
二、特性
- cookie是不安全的
- cookie是可以被篡改和伪造的
- cookie他是以字符串存储的（单一），有很多的数据类型是不支持的（二进制图片，二进制的视频，base64码的视频等等）
- cookie他的大小不能超过4kb（大小只有4kb 容量小）
- cookie会随请求发送
- cookie可以跨域（domain来设置）
三、构成
- 名称：唯一标识 cookie 的名称。cookie 名不区分大小写，因此 myCookie 和 MyCookie 是同一个名称。不过，实践中最好将 cookie 名当成区分大小写来对待，因为一些服务器软件可能这样对待它们。cookie 名必须经过 URL 编码。
- 值：存储在 cookie 里的字符串值。这个值必须经过 URL 编码。
- 域：cookie 有效的域。发送到这个域的所有请求都会包含对应的 cookie。
- 路径：请求 URL 中包含这个路径才会把 cookie 发送到服务器。例如，可以指定 cookie 只能由http://www.wrox.com/books/访问，因此访问 http://www.wrox.com/下的页面就不会发送 cookie，即使请求的是同一个域。
- 过期时间：表示何时删除 cookie 的时间戳（即什么时间之后就不发送到服务器了）。默认情况下，浏览器会话结束后会删除所有 cookie。不过，也可以设置删除 cookie 的时间。这个值是 GMT 格式（Wdy, DD-Mon-YYYY HH:MM:SS GMT），用于指定删除 cookie 的具体时间。这样即使关闭浏览器 cookie 也会保留在用户机器上。把过期时间设置为过去的时间会立即删除 cookie。
- 安全标志：设置之后，只在使用 SSL 安全连接的情况下才会把 cookie 发送到服务器。例如，请求 https://www.wrox.com 会发送 cookie，而请求 http://www.wrox.com 则不会。
注意：这些参数在 Set-Cookie 头部中使用分号加空格隔开。
我们可以通过特殊的格式的字符串形式来读写Document对象的cookie属性。
document.cookie //读取当前页面的所有cookie
但是，document.cookie一次只能写入一个Cookie，而且写入并不是覆盖，而是添加。
document.cookie = 'test1=hello';
document.cookie = 'test2=world';
document.cookie // test1=hello; test2=world
cookie完整的格式：
name=value; expires=expiration_time; path=domain_path; domain=domain_name; secure
注意：在所有这些参数中，只有 cookie 的名称和值是必需的。
（1）value属性
value属性是必需的，它是一个键值对，用于指定Cookie的值。
（2）expires属性
expires属性用于指定Cookie过期时间。它的格式采用Date.toUTCString()的格式。
expires=Thu, 01 Jan 1970 00:00:00 GMT
如果不设置该属性，或者设为null，Cookie只在当前会话（session）有效，浏览器窗口一旦关闭，当前Session结束，该 Cookie就会被删除。
浏览器根据本地时间，决定Cookie是否过期，由于本地时间是不精确的，所以没有办法保证Cookie一定会在服务器指定的时 间过期。
（3）domain属性
domain属性指定Cookie所在的域名，比如example.com或.example.com（这种写法将对所有子域名生效）、subdomain.example.com。
如果未指定，默认为设定该Cookie的域名。所指定的域名必须是当前发送Cookie的域名的一部分，比如当前访问的域名是 example.com，就不能将其设为google.com。只有访问的域名匹配domain属性，Cookie才会发送到服务器。
（4）path属性
path属性用来指定路径，必须是绝对路径（比如/、/mydir），如果未指定，默认为请求该Cookie的网页路径。
只有path属性匹配向服务器发送的路径，Cookie才会发送。这里的匹配不是绝对匹配，而是从根路径开始，只要path属性匹 配发送路径的一部分，就可以发送。比如，path属性等于/blog，则发送路径是/blog或者/blogroll，Cookie都会发送。path 属性生效的前提是domain属性匹配。
（5）secure属性
secure属性用来指定Cookie只能在加密协议HTTPS下发送到服务器。 该属性只是一个开关，不需要指定值。如果通信是HTTPS协议，该开关自动打开。
cookie增删改查方法的封装
//得到cookie
function getCookie(name) {
let cookieName = `${encodeURIComponent(name)}=`,
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = null;
if (cookieStart > -1) {
let cookieEnd = document.cookie.indexOf(";", cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(
document.cookie.substring(
cookieStart + cookieName.length,
cookieEnd
)
);
}
return cookieValue;
}
//增加或修改cookie
function setCookie(name, value, expires, path, domain, secure) {
let cookieText = `${encodeURIComponent(name)}=${encodeURIComponent(
value
)}`;
if (expires instanceof Date) {
cookieText += `; expires=${expires.toGMTString()}`;
}
if (path) {
cookieText += `; path=${path}`;
}
if (domain) {
cookieText += `; domain=${domain}`;
}
if (secure) {
cookieText += "; secure";
}
document.cookie = cookieText;
}
//删除cookie
function unsetCookie(name, path, domain, secure) {
setCookie(name, "", new Date(0), path, domain, secure);
}
encodeURIComponent 转码
console.log(encodeURIComponent('{abdejde152}'));
decodeURIComponent 解码
var str = encodeURIComponent('{abdejde152}') //进行编码
console.log(decodeURIComponent(str));//解码
四、localStorage(本地存储)
localStorage和cookie的区别
- cookie的大小只有4kb 对应的localstorage有5M
- cookie会随请求发送 localstorage不会随请求发送
- cookie只能存储字符串 localstorage可以存储对应的图片以及视频的二进制
- 存储的位置不一样的
- cookie是可以过期的 localstorage不能过期
共同点
- cookie和localstorage都是存储在浏览器上
- 存储的内容的形式都是以字符串形式
方法
- 通过设置属性来存储字符串值，查询该属性 来读取该值。
localStorage.user = 'TG';
- 提供了对应的存储（ setItem() ）和读取（ getItem() ）的方法。
localStorage.setItem('user','TG'); //存储一个以“user”的名字存储的数值。
localStorage.getItem('user'); //读取
- 还可以使用 removeItem() 和 clear() 方法来删除。
localStorage.removeItem('user'); //删除名为“user”的数据。
localStorage.clear(); //删除所有存储的数据
- 遍历存储数据。
for(var i=0; i < localStorage.length; i++){
var name = localStorage.key(i); //获取第i对的名字
console.log(localStorage.getItem(name); //获取该对的值
}
- 其中的 key 方法，根据位置（从0开始）获得键值
localStorage.key(1);
