Cookie

Cookie
+ 浏览器端的本地存储空间
+ 用来存储一些数据

cookie 的特点(记下来!!!)
1. 按照域名存储的
+ 哪一个域名存储的, 在当前域名下就可以访问
+ 换一个域名就不能访问
2. 按照文件路径存储
+ 你在 a 文件夹下存储的数据
+ 只能在 a 文件夹及子文件夹访问
+ 在 a 文件夹的上级目录不能访问
3. cookie 的存储时按照字符串的形式存储
+ 'key=value; key2=value2; key3=value3'
4. 存储大小
+ 4KB 左右
+ 50条左右（大神自测150条左右，但是不超过155条）
5. 时效性
+ 默认时会话级别的时效(关闭浏览器就没有了)
+ 我们可以手动设置 cookie 的时效(关闭浏览器以后依旧保存)
6. 操作权限
+ 前端可以操作
+ 后端可以操作
7. 请求自动携带
+ 只要 cookie 空间里面有数据
+ 那么你在发送任何一个请求的时候, 自动携带

前端操作 cookie
+ 前提: 想使用或者操作 cookie, 页面必须时在服务器上打开

1. document.cookie
+ 读写的属性
+ 读: ducoment.cookie
=> 会把 cookie 空间里面所有的数据全部拿出来, 字符串的形式
+ 写: document.cookie = 'key=value'
=> 写入一条 cookie
*/

// 设置一条叫做 c 的 cookie ,值时 300
// document.cookie = 'c=300'

设置 cookie 

1. 一次只能设置一条 cookie
2. 在设置的时候, 每一条的分号后面可以书写对本条 cookie 的描述
=> expires 过期时间
-> 如果你不进行特殊设置, 默认就是会话级别的时效性
-> 你要是想修改, expires=时间对象
=> path 存储路径
-> 如果你步进行特殊设置, 会按照目前的目录结构进行存储
-> 如果你想修改 key=value;path=你要存储的路径
3. 在设置的时候, 不管你存储什么数据类型
=> 都会自动转换成字符串格式给你存储
=> cookie 一般都是存储一些简单数据
4. 在设置的时候, 如果设置同名的 cookie 就是修改
=> 注意: 一定是相同路径下同名才是修改
5. 在设置的时候, 如果设置一个 cookie 的过期时间时当前时间以前
=> 就是删除这条cookie
=> 在到达过期时间的那一瞬间, 这一条 cookie 已经从浏览器移除了
*/

// 1. 一次只能设置一条
// document.cookie = 'a=100;path=/'
// document.cookie = 'b=200;expires=' + new Date(2019, 1)
// document.cookie = 'obj=' + { name: 'Rose' }
// document.cookie = 'fn=' + function () {}
// document.cookie = 'arr=' + [1, 2, 3, 4, 5]
// document.cookie = 'obj=hello'

设置一个有时效性的 cookie
+ 在本条 cookie 后面加一个 expires 描述
1. expires 要接收一个时间对象
+ 或者事件对象的字符串
2. 分析:
=> 你获取的时间是终端时间, 不是世界标准时间
=> 当你设置 cookie 的时候, 不管你给他什么时间节点, 他都当作世界标准时间使用
3. 需求:
=> 我要设置一个 30s 以后过期的 cookie
=> 获取当前时间, 向前调整 8 个小时, 在向后调整 30s
=> 例子: 现在时间是 17:10:00
1. 向前调整八个小时 9:10:00
2. 向后调整 30s 9:10:30
3. 你把 9:10:30 设置给 cookie 的过期时间
cookie 会把他当作世界标准时间 9:10:30 使用
这条 cookie 真正的过期时间是中国标准时间 17:10:30 的时候
*/

// time 拿到的是 5:07 的时间节点
// var time = new Date()
// 设置 cookie 的时候, 把 5:07 当作过期时间设置给 这一条 cookie
// 这一条 cookie 接收到 5:07 会把他当作世界标准时间 5:07 来设置
// 也就是这一条 cookie 会在世界标准时间 5:07 分的时候过期
// 也就是我们的夜里 1:07 分过期
// document.cookie = 'a=100;expires=' + time

// 设置一个 30s 以后过期的 cookie
var time = new Date()
// 拿到时间戳
var t1 = time.getTime()
// 减去 8 个小时的 毫秒数
var t2 = t1 - 1000 * 60 * 60 * 8//获得国际标准时间
// 加上 30s 的毫秒数
var t3 = t2 + 1000 * 30
// 利用时间戳设置时间对象
time.setTime(t3)

// document.cookie = 'a=100;expires=' + time

console.log(document.cookie)

/*
封装一个方法叫做 setCookie

准备一个函数, 接收几个参数 ?
1. key
2. value
3. expires
=> 数字, 表示 xxx 秒以后
4. path

function setCookie(key, value, expires, path) {
// 1. 准备一个标准cookie内容
var str = key + '=' + value

if (expires) {
// 处理一下时间
var time = new Date()
time.setTime(time.getTime() - 1000 * 60 * 60 * 8 + expires * 1000)
str += ';expires=' + time
}

if (path) {
// 处理一下路径
str += ';path=' + path
}

console.log(str)

// 设置上就可以了
document.cookie = str
}


// 将来使用的时候
setCookie('a', '100', 30, '/') // 表示我想 30s 以后过期

前端获取 cookie
+ 因为我们的获取都是获取一整个

// 通过有参数或者没有参数决定执行那一套
function getCookie(key) {
// 1. 先把 cookie 拿过来
var tmp = document.cookie.split('; ')

// 2. 准备一个变量存储什么数据 ?
// 传递 key , 准备一个字符串
// var str = ''
// 没传递 key , 准备一个空对象
// var obj = {}
var o = key ? '' : {}

// 3. 遍历 tmp
tmp.forEach(function (item) {
// 3-1. 每一个肯定也是要切开的
var t = item.split('=')
// 3-2. 判断有没有 key
if (key) {
if (t[0] === key) {
o = t[1]
}
} else {
// 随着循环
// i === 0 , t = ['a', '100'], t[0] === 'a', t[1] === 100
// i === 1 , t = ['b', '200'], t[0] === 'b', t[1] === 200
// i === 2 , t = ['c', '300'], t[0] === 'c', t[1] === 300
o[t[0]] = t[1]
}
})

// 4. 把结果返回
return o
}


// 将来你想怎么用
// var res = getCookie('a') // 返回指定这个 key 的值
// var res = getCookie() // 返回一个对象

console.log(getCookie('a'))
console.log(getCookie('b'))
console.log(getCookie('c'))
console.log(getCookie('d'))
console.log(getCookie())