本地存储

一、Cookie

1、Cookie是什么

Cookie 全称是HTTP Cookie 简称Cookie 是浏览器存储数据的一种方式

• Cookie存储在用户本地，而不是存储在服务器上，是本地存储
• 一般会自动随着浏览器每次请求发送到服务器端

2、Cookie有什么用

• 利用Cookie跟踪同级用户访问该网站的习惯，例如什么四件访问，访问了哪些页面，在每个网页停留的时间

3、在浏览器中操作cookie

查看随着请求在请求头中发送到服务器

image.png

在控制台查看站点对应的cookie值

image.png

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 开始支持