cookie （会话）
cookie是浏览器提供的一项功能
是一个本地的存储文件用于存储数据
前端和后端程序都可以调用操作cookie中存储的数据
cookie的基本属性：
- name ：键名
- value ：键值
- domain ：域名
- path ：路径 符合路径的文件才能访问cookie
- expires的操作语法 ：有效期 / 失效 超过有效期的cookie浏览器就自动删除
页面打开检查（F12），点击application，就会出现cookie
JavaScript设定cookie的基本语法形式：
- 设定：
document.cookie = '键名=键值;expires=有效期;path=路径';
注： 键名键值是必须设定的，expires不设置默认session会话时效，path不设定默认当前文件所在文件夹
- 获取：
const 变量 = document.cookie
注： cookie键值对字符串，需要转化为对象形式 也就是：const 变量 = JSON.parse(document.cookie)
以下代码是一个封装好的cookie.js文件：
/*
设定cookie函数
@param name cookie的键名
@param value cookie的键值
@param expires cookie的时效 默认值是 ''
@param path cookie的路径 默认值是 ''
*/
function mySetCookie(name, value, time = '', path = '') {
// 如果 time 输入了数据 根据 数据设定 时效性
if (time !== '') {
// 根据输入的时间设定 time存储的时间对象的时间戳
const t = new Date();
t.setTime(t.getTime() + time * 1000 - 8 * 60 * 60 * 1000);
// 将 时间对象 赋值给 time变量储存
time = t;
}
// 设定 cookie
document.cookie = `${name}=${value};expires=${time};path=${path}`;
}
/*
获取 cookie 转化为 对象
@return obj 转化后cookie对象
*/
function myGetCookie() {
// 定义一个对象 存储 转化结果
const obj = {};
// 后去 cookie 键值对字符串
let str = document.cookie;
// 根据 分号空格 将字符串转护为数组
const arr1 = str.split('; ');
// 根据 =等号 将 数组1中的键值对 转化为 数组
arr1.forEach(item => {
const arr2 = item.split('=');
// 数组2 中 索引0 存储 键名
// 数组2 中 索引1 存储 键值
obj[arr2[0]] = arr2[1];
})
// 返回值 是 这个对象
return obj;
}
使用时导入这个js文件
设置cookie时调用函数mySetCookie( name , value , time , path )就可以添加到cookie
查看cookie时调用函数myGetCookie( )就可以获取到cookie
localStorage（本地存储）
是浏览器提供的一项功能，在本地存储数据数值
localStorage的基本语法形式：
设定存储：
window.localStorage.setItem( '键名' , '键值' ) 或 localStorage.键名 = 键值
存储json字符串：
localStorage.arr = JSON.stringify( [ {} , {} , {} , .... ] )
获取：
localStorage.getItem( '键名' )
删除：
localStorage.removeItem( '键名' ) 或 delete（localStorage.age）
cookie和localStorage的区别
1. cookie - 第一要通过服务器才能操作 localStorage - 本地就可以操作
2. cookie - 前端后端都可操作 localStorage - 只要前端操作
3. cookie - 有时效，过期浏览器自动删除 localStorage - 没有时效，除非手动删除，不然一直存在
4. cookie - 有路径，符合路径的文件才能访问 localStorage - 路径只能是根目录
5. cookie - 只能存储字符串 localStorage - 可以存储字符串以及json字符串
6. cookie - 存储内容小，一般 4K 左右 localStorage - 存储内容较大，一般 4M 左右
总结
只需要前端使用的数据 一般用localStorage存储
前端后端都需要使用的数据 一般用cookie存储
