一、cookie
1、cookie的属性
- cookie创建是必须设置name和value，其它属性可以使用默认值。Cookie 的名称或值如果包含非英文字母，则写入时需要使用 encodeURIComponent() 编码，读取时使用 decodeURIComponent() 解码。
document.cookie = `username=${encodeURIComponent('张三')}`;
document.cookie = `${encodeURIComponent('用户名')}=${encodeURIComponent(
'张三'
)}`;
2、cookie的失效（到期）时间
- 对于失效的 Cookie，会被浏览器清除。如果没有设置失效（到期）时间，这样的 Cookie 称为会话 Cookie，它存在内存中，当会话结束，也就是浏览器关闭时，Cookie 消失。想长时间存在，可以设置 Expires 或 Max-Age。
- expires：值为 Date 类型。
document.cookie = `username=alex; expires=${new Date(
'2100-1-01 00:00:00'
)}`;
- max-age： 值为数字，表示当前时间 + 多少秒后过期，单位是秒。如果 max-age 的值是 0 或负数，则 Cookie 会被删除。
document.cookie = `username=alex; max-age=${24 * 3600 * 30}`;
3、Domain域
- Domain 限定了访问 Cookie 的范围（不同域名），使用 JS 只能读写当前域或父域的 Cookie，无法读写其他域的 Cookie。
document.cookie = 'username=alex; domain=www.imooc.com';
4、Path 路径
- Path 限定了访问 Cookie 的范围（同一个域名下）。使用 JS 只能读写当前路径和上级路径的 Cookie，无法读写下级路径的 Cookie。
document.cookie = 'username=alex; path=/course/list';
document.cookie = 'username=alex; path=/1.Cookie/';
5、HttpOnly
- 设置了 HttpOnly 属性的 Cookie 不能通过 JS 去访问。
6、Secure 安全标志 - Secure 限定了只有在使用了 https 而不是 http 的情况下才可以发送给服务端。
注意：当 Name、Domain、Path 这 3 个字段都相同的时候，才是同一个 Cookie。Domain、Path、Secure 都要满足条件，还不能过期的 Cookie 才能随着请求发送到服务器端。
7、封装cookie
// 设置cookie
const set = (name,value,{maxAge,domain,path,secure} = {})=>{
const 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 = ${secure}`;
}
document.cookie = cookieText;
}
// 获取cookie
const get = (name) =>{
name = `${encodeURIComponent(name)}`;
const cookies = document.cookie.split('; ');
for ( let item of cookies) {
const [cookieName,cookieValue] = item.split('=');
if (cookieName === name) {
return cookieValue = `${encodeURIComponent(cookieValue)}`;
}
}
return
}
// 删除cookie
const remove = (name,{domain,path} = {})=>{
set(name,{
domain,
path,
maxAge: -1
})
}
二、session
1、localStorage：是持久化的本地存储，除非手动清除（比如通过 js 删除，或者清除浏览器缓存），否则数据是永远不会过期的。单个域名下的 localStorage 总大小有限制。
2、localStorage的基本用法
- setItem()：保存数据。
- getItem()：获取数据。获取不存在的数据则返回 null。
- removeItem()：删除数据。
- clear()：清楚所有数据。
// 使用 localStorage 实现自动填充
<form id="login" action="https://www.imooc.com" method="post">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" id="btn" value="登录">
</form>
<script>
const loginForm = document.getElementById('login');
const btn = document.getElementById('btn');
const username = localStorage.getItem('username');
if (username) {
loginForm.username.value = username;
}
btn.addEventListener(
'click',
e => {
e.preventDefault();
// 数据验证
localStorage.setItem('username', loginForm.username.value);
loginForm.submit();
},
);
</script>
2、sessionStorage：会话存储，当会话结束（比如关闭浏览器）的时候，sessionStorage 中的数据会被清空。
- setItem()：保存数据。
- getItem()：获取数据。获取不存在的数据则返回 null。
- removeItem()：删除数据。
- clear()：清楚所有数据。
注：localStorage和sessionStorage 存储的键和值只能是字符串类型，不是字符串类型，也会先转化成字符串类型再存进去
。不同的域名是不能共用 localStorage和sessionStorage。
