前后端通信-学习笔记-2

本地存储

一、Cookie

1、认识Cookie

2、Cookie的基本用法

3、Cookie的属性

4、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 };

5、Cookie的注意事项

二、localStorage

1、认识localStorage

// 1.localStorage 是什么
      // localStorage 也是一种浏览器存储数据的方式（本地存储），它只是存储在本地，不会发送到服务器端

      // 单个域名下的 localStorage 总大小有限制

      // 2.在浏览器中操作 localStorage

      // 3.localStorage 的基本用法
      // console.log(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);

      // 4.使用 localStorage 实现自动填充
      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();
          // 数据验证

          // console.log(loginForm.username.value);

          localStorage.setItem('username', loginForm.username.value);

          loginForm.submit();
        },
        false
      );

2、注意事项

 // 1.localStorage 的存储期限
      // localStorage 是持久化的本地存储，除非手动清除（比如通过 js 删除，或者清除浏览器缓存），否则数据是永远不会过期的

      // sessionStorage
      // 当会话结束（比如关闭浏览器）的时候，sessionStorage 中的数据会被清空
      // sessionStorage.setItem('username', 'alex');
      // sessionStorage.getItem('username');
      // sessionStorage.removeItem('username');
      // sessionStorage.clear();

      // 2.localStorage 键和值的类型
      // localStorage 存储的键和值只能是字符串类型
      // 不是字符串类型，也会先转化成字符串类型再存进去

      // localStorage.setItem({}, 18);
      // // localStorage.setItem('students', [{},{}]);
      // console.log(
      //   typeof localStorage.getItem('[object Object]'),
      //   localStorage.getItem('[object Object]')
      // );

      // console.log({}.toString());

      // 3.不同域名下能否共用 localStorage
      // 不同的域名是不能共用 localStorage 的

      // 4.localStorage 的兼容性
      // IE7及以下版本不支持 localStorage，IE8 开始支持

      // caniuse.com