一、Cookie
1、Cookie是什么
Cookie 全称是HTTP Cookie 简称Cookie 是浏览器存储数据的一种方式
- Cookie存储在用户本地,而不是存储在服务器上,是本地存储
- 一般会自动随着浏览器每次请求发送到服务器端
2、Cookie有什么用
- 利用Cookie跟踪同级用户访问该网站的习惯,例如什么四件访问,访问了哪些页面,在每个网页停留的时间
3、在浏览器中操作cookie
查看随着请求在请求头中发送到服务器
在控制台查看站点对应的cookie值
4、写入 Cookie
不能一起设置,只能一个一个设置
document.cookie = 'username=zs';
document.cookie = 'age=18';
// 错误写法
// document.cookie = 'username=zs; age=18';
5、读取cookie
读取的是一个由名值对构成的字符串,每个名值对之间由“; ”(一个分号和一个空格)隔开
username=zs; age=18
console.log(document.cookie);
6、Cookie 的名称(Name)和值(Value)
最重要的两个属性,创建 Cookie 时必须填写,其它属性可以使用默认值
Cookie 的名称或值如果包含非英文字母,则写入时需要使用 encodeURIComponent() 编码,读取时使用 decodeURIComponent() 解码
document.cookie = 'username=alex';
document.cookie = `username=${encodeURIComponent('张三')}`;
document.cookie = `${encodeURIComponent('用户名')}=${encodeURIComponent(
'张三'
)}`;
一般名称使用英文字母,不要用中文,值可以用中文,但是要编码
7、失效时间
- 对于失效的 Cookie,会被浏览器清除
- 如果没有设置失效(到期)时间,这样的 Cookie 称为会话 Cookie
- 它存在内存中,当会话结束,也就是浏览器关闭时,Cookie 消失
- 想长时间存在,设置 Expires 或 Max-Age
expires
值为 Date 类型
document.cookie = `username=alex; expires=${new Date(
'2100-1-01 00:00:00'
)}`;
max-age
值为数字,表示当前时间 + 多少秒后过期,单位是秒
document.cookie = 'username=alex; max-age=5';
document.cookie = `username=alex; max-age=${24 * 3600 * 30}`;\
如果 max-age 的值是 0 或负数,则 Cookie 会被删除
document.cookie = 'username=alex';
document.cookie = 'username=alex; max-age=0';
document.cookie = 'username=alex; max-age=-1';
8、Domain 域:Domain 限定了访问 Cookie 的范围(不同域名)
使用 JS 只能读写当前域或父域的 Cookie,无法读写其他域的 Cookie
document.cookie = 'username=alex; domain=www.imooc.com';
// www.imooc.com m.imooc.com 当前域
// 父域:.imooc.com
9、Path 路径 :Path 限定了访问 Cookie 的范围(同一个域名下)
- 使用 JS 只能读写当前路径和上级路径的 Cookie,无法读写下级路径的 Cookie
- 当 Name、Domain、Path 这 3 个字段都相同的时候,才是同一个 Cookie
document.cookie = 'username=alex; path=/course/list';
document.cookie = 'username=alex; path=/1.Cookie/';
10、 HttpOnly :设置了 HttpOnly 属性的 Cookie 不能通过 JS 去访问
11、Secure 安全标志
- Secure 限定了只有在使用了 https 而不是 http 的情况下才可以发送给服务端
- Domain、Path、Secure 都要满足条件,还不能过期的 Cookie 才能随着请求发送到服务器端
12、cookie的封装
// 写入 Cookie
const set = (name, value, { maxAge, domain, path, secure } = {}) => {
let cookieText = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
if (typeof maxAge === 'number') {
cookieText += `; max-age=${maxAge}`;
}
if (domain) {
cookieText += `; domain=${domain}`;
}
if (path) {
cookieText += `; path=${path}`;
}
if (secure) {
cookieText += `; secure`;
}
document.cookie = cookieText;
// document.cookie='username=alex; max-age=5; domain='
};
// 通过 name 获取 cookie 的值
const get = name => {
name = `${encodeURIComponent(name)}`;
const cookies = document.cookie.split('; ');
for (const item of cookies) {
const [cookieName, cookieValue] = item.split('=');
if (cookieName === name) {
return decodeURIComponent(cookieValue);
}
}
return;
};
// 'username=alex; age=18; sex=male'
// ["username=alex", "age=18", "sex=male"]
// ["username","alex"]
// get('用户名');
// 根据 name、domain 和 path 删除 Cookie
const remove = (name, { domain, path } = {}) => {
set(name, '', { domain, path, maxAge: -1 });
};
export { set, get, remove };
13、cookie的注意事项
- 前后端都可以创建 Cookie
- Cookie 有数量限制
- 每个域名下的 Cookie 数量有限
- 当超过单个域名限制之后,再设置 Cookie,浏览器就会清除以前设置的 Cookie
- Cookie 有大小限制
- 每个 Cookie 的存储容量很小,最多只有 4KB 左右
二、localStorage
1、localStorage 是什么
localStorage 也是一种浏览器存储数据的方式(本地存储),它只是存储在本地,不会发送到服务器端
单个域名下的 localStorage 总大小有限制
2、localStorage 的基本用法
// setItem()
localStorage.setItem('username', 'alex');
localStorage.setItem('username', 'zs');
localStorage.setItem('age', 18);
localStorage.setItem('sex', 'male');
// length
// console.log(localStorage.length);
// getItem()
// console.log(localStorage.getItem('username'));
// console.log(localStorage.getItem('age'));
// // 获取不存在的返回 null
// console.log(localStorage.getItem('name'));
// removeItem()
// localStorage.removeItem('username');
// localStorage.removeItem('age');
// // 删除不存在的 key,不报错
// localStorage.removeItem('name');
// clear()
localStorage.clear();
console.log(localStorage);
3、localStorage 的注意事项
- localStorage 的存储期限
- localStorage :是持久化的本地存储,除非手动清除(比如通过 js 删除,或者清除浏览器缓存),否则数据是永远不会过期的
- sessionStorage:当会话结束(比如关闭浏览器)的时候,sessionStorage 中的数据会被清空
- localStorage 键和值的类型
- localStorage 存储的键和值只能是字符串类型
- 不是字符串类型,也会先转化成字符串类型再存进去
// localStorage.setItem('students', [{},{}]); console.log( typeof localStorage.getItem('[object Object]'), localStorage.getItem('[object Object]') ); console.log({}.toString());
- 不同域名下能共用 localStorage
- localStorage 的兼容性 :IE7及以下版本不支持 localStorage,IE8 开始支持