JS-part16.6-Cookie

Cookie

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

cookie 的特点(重点!!!)

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

和 localStorage 一样在 application 下查看

前端操作 cookie

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

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

console.log(document.cookie)

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

设置 cookie (重点!!!)

1. 一次只能设置一条
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()
// document.cookie = 'b=200;expires=' + new Date(2019,10)  // 删除了
document.cookie = 'c=200;'
document.cookie = 'obj=' + {name: 'Jack'}
// document.cookie = 'obj=hello' //  相同目录同名是修改
document.cookie = 'fn=' + function(){}
document.cookie = 'arr=' + [1,2,3,4,5]

设置一个有时效性的 cookie

+ 在本条 cookie 后面加一个 expires 
  1. expires 要接收一个时间对象
    + 或者事件对象的字符串也可以了
  2. 分析:
    => 获取的时间是终端时间, 不是世界标准时间
    => 当你设置 cookie 的时候, 不管你给什么时间节点, 他都当作世界标准时间使用

// time 拿到的是 20:42 的时间节点
var time = new Date()
// 设置 cookie 的时候, 把 20:42 当作过期时间设置给 这一条 cookie
// 这一条 cookie 接收到 20:42, 会把它当作世界标准时间 20:42 来设置
// 也就是这一条 cookie 会在世界标准时间 20:42 分的时候过期
// 也就是在中国时间上午 10:42 分过期(德国时间 19:42 分过期)
document.cookie = 'a=100;expires=' + time
document.cookie = 'b=200;expires=Sat Sep 18 2021 20:42:23 GMT+0200 (Central European Summer Time)'

3. 需求: 
  => 我要设置一个 30s 以后过期的 cookie
  => 在中国: 获取当前时间, 向前调整 8 个小时, 再向后调整 30s
  => 例子: 现在是中国标准时间是 21:00:00
    1. 向前调整八个小时 13:00:00
    2. 向后调整 30s    13:00:30
    3. 你把 13:00:30 设置给 cookie 的过期时间
       cookie 会把它当作世界标准时间 13:00:30 使用
       这条 cookie 真正的过期时间是中国标准时间 21:00:30 的时候

// 设置一个 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

可以把它封装起来

前端获取 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{
            o[t[0]] = t[1]
        }
    })
    // 4. 把结果返回
    return o
}

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

console.log(getCookie('a'))
console.log(getCookie())

自己封装下

后端操作 cookie

所有前后端都能做的事, 后端都比前端容易

1. 获取
  => php 天生自带一个关联型数组, 叫做 $_COOKIE
  => 里面包含所有的 cookie 信息
  => 你想获取哪一个, 直接从关联型数组里面获取

// 1. 后端获取 cookie
print_r($_COOKIE);
print_r($_COOKIE['a']);
print_r($_COOKIE['b']);
print_r($_COOKIE['c']);

2. 后端设置 cookie
  => 有一个方法叫做 setcookie()
  => 语法: setcookie(key, value, expires, path)

// 2. 后端设置 cookie
setcookie('aa', 100);  // 会话级别

// 后端获取当前时间 time() + 10  
setcookie('bb', 200, time() + 10);  // 10s 以后过期

setcookie('cc', 200, time() + 10, '/');  // 10s 以后过期, 路径设置到根目录

setcookie('aa', '', time() - 1);  // 删除 key 为 aa 这条 cookie

其他的作用

和服务器端的 session 一起用。借助于session + cookie来和客户端交互的(未完待续)

较cookie来说，session相对安全一些。
session依赖cookie，当用户访问某一站点时，服务器会为这个用户产生唯一的session_id,并把这个session_id以cookie的形式发送到客户端，以后的客户端的所有请求都会自动携带这个cookie（前提是浏览器支持并且没有禁用cookie）