（七）本地存储

一、Cookie

1. 认识 Cookie

• Cookie 是什么：
  • Cookie 全称 HTTP Cookie，简称 Cookie
  • 是浏览器存储数据的一种方式
  • 因为存储在用户本地，而不是存储在服务器上，是本地存储
  • 一般会自动随着浏览器每次请求发送到服务器端
• Cookie 的作用：
  利用 Cookie 跟踪统计用户访问该网站的习惯，比如什么时间访问，访问了哪些页面，在每个网页的停留时间等
• 在浏览器中操作 Cookie：
  添加 Cookie：Application—>Storage—>Cookies
  获取 Cookie：Console document.cookie
  不要在 Cookie 中保存密码等敏感信息

2. Cookie 的基本用法

• 写入 Cookie：
  document.cookie = 'username=zs';
document.cookie = 'age=18';
  不能一起设置，只能一个一个设置：
  document.cookie = 'username=zs; age=18'; 只会添加 username
• 读取 Cookie：
  console.log(document.cookie);
  读取的是一个由名值对构成的字符串，每个名值对之间由 “; ”（一个分号和一个空格）隔开：
  username=zs; age=18

3. Cookie 的属性

• Cookie 的名称（Name）和值（Value）：
  • 最重要的两个属性，创建 Cookie 时必须填写，其它属性可以使用默认值
    document.cookie = 'username=alex';
  • Cookie 的名称或值如果包含非英文字母，则写入时需要使用 encodeURIComponent() 编码，读取时使用 decodeURIComponent() 解码
    一般名称使用英文字母，不要用中文，值可以用中文，但是要编码

document.cookie = `username=${
     encodeURIComponent('张三')}`;
document.cookie = `${
     encodeURIComponent('用户名')}=${
     encodeURIComponent('张三')}`;

• 失效（到期）时间：
  • 对于失效的 Cookie，会被浏览器清除
  • 如果没有设置失效（到期）时间，这样的 Cookie 称为会话 Cookie；
    会话 Cookie 存在内存中，当会话结束，也就是浏览器关闭时，Cookie 消失

document.cookie = 'username=mike';

// 想长时间存在，设置 Expires 或 Max-Age
// expires，值为 Date 类型
document.cookie = `username=mike; expires=${
     new Date(
	'2100-1-01 00:00:00'
)}`;

// max-age，值为数字，表示当前时间 + 多少秒后过期，单位是秒
document.cookie = 'username=mike; max-age=5';
document.cookie = `username=mike; max-age=${
     24 * 3600 * 30}`;

// 如果 max-age 的值是 0 或负数，则 Cookie 会被删除
document.cookie = 'username=mike';
document.cookie = 'username=mike; max-age=0';
document.cookie = 'username=mike; max-age=-1';

• Domain 域：
  Domain 限定了访问 Cookie 的范围（不同域名）

// 使用 JS 只能读写当前域 或 父域的 Cookie，无法读写其他域的 Cookie
document.cookie = 'username=mike; domain=www.imooc.com';
// 当前域：www.imooc.com m.imooc.com 
// 父域：.imooc.com

• Path 路径：
  Path 限定了访问 Cookie 的范围（同一个域名下）

// 使用 JS 只能读写当前路径和上级路径的 Cookie，无法读写下级路径的 Cookie
document.cookie = 'username=mike; path=/course/list';
document.cookie = 'username=mike; path=/1.Cookie/';