首先给自己来个扫盲吧
- 前端：通过浏览器跟用户交互；
- 后端：负责提供数据和数据交互；
- cookie: 位置：在控制台的Application->Storage->Cookies
- cookie: 前端用来存储内容的区域(刷新后，通过document.cookie 仍然还可以看到之前添加到 cookie 里面的内容，不会因为刷新而丢失)。后端可以操作前端的cookie;后端也可直接种植cookie到前端
- 可以通过 document.cookie 获取大部分cookie（另外的一小部分是前端无法操作的）
由于cookie 一般都是以键值对的方式存储的，并且每个cookie 值之间都是以 ‘; ’ 结尾，故可以来个小正则给匹配一下； 下面来一个小小的获取cookie的方法
function getCookie(key){
let str = document.cookie,
reg = new RegExp(`${key}=([^; ]+)`),
res = str.match(reg);
return res ? res[1] : null;
}
getCookie('name'); // 返回值就是 name 属性名对应的属性值
cookie 也可以自己设置
// key 要设置的属性名
// value 对应的属性值
// date 对应的过期日期
function setCookie(key, value, date){
// 若日期存在，则设置好过期日期
if(date){
document.cookie = `${key}=${value}; expires=${new Date(date)}`;
}else{
document.cookie = `${key}=${value}`;
}
}
删除cookie: 只要让 expires 过期日期失效（即这个cookie 已经过期了），那么浏览器会自动删除这个cookie
function removeCookie(key){
document.cookie = `${key}=null; expires=${new Date(100)}`;
}
-
cookie的大小有限制，不同浏览器不一样 大概是在5k左右;会随着请求发送给后端；
-
session: 这是一个后端存储 也就是 后端的cookie ； cookie--》浏览器； session--》服务器
-
在H5之后，又新增了 localStorage 和 sessionStorage 这两个存储空间；大概是在5M左右 只能前端操作 后端操作不了；不会随着请求发给后端；
-
localStorage存储的内容，若不主动清除，那么将会永远存在;
-
localStorage.getItem(属性名) 是用来获取对应的localStorage属性；
-
localStorage.setItem(属性名,属性值)用来设置 localStorage；属性值必须是字符串，若不是，则会默认调用自己的toString转成字符串
-
在工作中，我们一般会使用JSON.stringify(属性值) 处理引用数据类型；当我们获取的时候，需要再用JSON.parse转成对象；
-
localStorage.removeItem(属性名)：删除对应的属性；
-
localStorage.clear()：删除所有的属性
-
sessionStorage 的api 等同于localStorage;这两者的区别在于：localStorage永远不会清除，sessionStorage会在浏览器关闭的时候自动清除
暂且到这儿吧，欢迎各位大佬指正补充
