一：区别

1、cookie：(4kb)

可以设置到期时间、在任意浏览器的窗口都可以访问到

  1. document.cookie = 'name="zs"; max-age=1'; // 设置变量和到期时间
  2. console.log(document.cookie)   // 获取cookie的值
  3. document.cookie = 'name=zs; max-age = -1'  // 删除当前cookie值

cookie方法的封装

  1. let manageCookie = {
  2.       set (key, value, time) {
  3.         document.cookie = `${key}=${value}; max-age=${time}`
  4.         return this;
  5.       },
  6.       get (key, cb) {
  7.         let cookie = document.cookie,
  8.             cookieArr = cookie.split('; '),
  9.             itemArr = null;
  10.         cookieArr.forEach(function (cookieItem) {
  11.           itemArr = cookieItem.split('=');
  12.           // 如果键名相同
  13.           if(itemArr[0] === key) {
  14.             cb(itemArr[1]);
  15.           } else {
  16.             cb();
  17.           }
  18.         })
  19.         return this;
  20.       },
  21.       delete (key) {
  22.         this.set(key, '', -1);
  23.         return this;
  24.       }
  25.     }

2、localStorage(10MB)

永久存储、除非手动删除、在任意浏览器的窗口都可以访问到

  1. window.localstorage.getItem(key);
  2. window.localstorage.setItem(key, value);
  3. window.localStorage.removeItem(key, value)

3、sessionStorage(5MB)

只有在当前页面才能访问得到；

  1. window.sessionStorage.getItem(key);
  2. window.sessionStorage.setItem(key, value);
  3. window.sessionStorage.removeItem(key, value)