Cookie与localStorage、sessionStorage总结

Crystal328
9 阅读4分钟

1. Cookie

  • Cookie 是浏览器存储数据的一种方式
  • 存储在用户本地，而不是存储在服务器上
  • 可以随着浏览器每次请求发送到服务器端

1.1 Cookie 的用法

  • 只能一个一个的写入，不能将多个 Cookie 写在一起
  • 写入 Cookie 时是可以加入多个属性的，属性与属性之间是需要 ; （分号+空格）来分开

原生的 Cookie 是不能通过特定的名称来读取特定的值，只能一次性全部读取出来。

// 创建一个Cookie类，添加三个静态方法，将Cookie类作为接口导出
// set方法 设置Cookie
// get方法，通过Cookie的name获取value值
// remove方法，通过cookie的name删除对应的Cookie

export default class {
  // 设置Cookie
  //设置Cookie name,value,max-age,domain path,secure
  static set(name, value, { maxAge, domain, path, secure } = {}) {
    let cookieText = `${encodeURIComponent(name)} = ${decodeURIComponent(value)}`;
    //设置失效时间
    if (maxAge) {
      cookieText += `; max-age=${maxAge}`
    }
    //   设置域
    if (domain) {
      cookieText += `; domain=${domain}`
    }
    // 设置路径
    if (path) {
      cookieText += `; path=${path}`
    }
    // 安全标志
    if (secure) {
      cookieText += `; secure=${secure}`
    }
    document.cookie = cookieText
  }
  // 获取Cookie
  static get(name) {
    // 得到这个name，也需要编码
    name = encodeURIComponent(name)
    // 读取cookie
    let cookies = document.cookie.split('; ')
    // 遍历数组的每一项
    for (let item of cookies) {
      const [cookieName, cookieValue] = item.split('=')
      if (cookieName === name) {
        return cookieValue
      }
    }

  }
  // 删除Cookie
  // 设置过期时间即可
  static remove() {
    this.set(this.name, { domain, path, maxAge: -1 })
  }
}

1.2 Cookie 的属性

属性分类属性名称详细说明
必选核心属性名称（name）1. 创建 Cookie 时必须填写；2. 与 Domain、Path 共同判定是否为同一个 Cookie（三者均相同则为同一 Cookie）
必选核心属性值（value）1. 创建 Cookie 时必须填写，用于存储核心数据；2. 若包含非英文字母，写入时需用 encodeURIComponent() 编码；3. 若写入时已编码，读取时需用 decodeURIComponent() 解码
失效（到期）属性Expires1. 用于设置 Cookie 具体过期时间，值为 Date 类型；2. 不设置时，默认会话结束后 Cookie 被浏览器清除；3. 失效后的 Cookie 会被浏览器自动清理
失效（到期）属性Max-Age1. 用于设置 Cookie 过期时长，值为数字（单位：秒，当前时间累加该秒数后过期）；2. 值为 0 或负数时，Cookie 会被立即删除；3. 优先级通常高于 Expires
访问范围限定Domain（域）1. 限定不同域下的 Cookie 访问范围；2. JS 仅能写入 / 读取当前域或父域的 Cookie，无法操作其他无关域的 Cookie
访问范围限定Path（路径）1. 限定同域不同路径下的 Cookie 访问范围；2. JS 仅能写入 / 读取当前路径或上级路径的 Cookie，无法操作其他无关路径的 Cookie
安全相关属性HttpOnly1. 仅支持后端设置，前端无法通过 JS（document.cookie）获取或修改；2. 核心作用：防止 XSS 攻击窃取 Cookie 数据
安全相关属性Secure1. 限定仅在 HTTPS 协议下，Cookie 才会随请求发送至服务端；2. HTTP 协议下无法传递带有该属性的 Cookie
生效条件补充-Cookie 需同时满足以下条件才会随请求发送到服务端：1. Domain 匹配；2. Path 匹配；3. Secure 条件匹配（HTTPS 环境）；4. Cookie 未过期

1.4 注意事项

  • 前后端都可以写入和读取 Cookie
  • 每个域名下的 Cookie 数量有限
  • 每个 Cookie 的存储容量很小，最多只有 4KB 左右，每个浏览器不一样

2. localStorage

  • localStorage 是浏览器存储数据的一种方式
  • 存储在用户本地，不会发送到服务器端
  • 单个域名下的总大小有限制（一般最大 5MB 左右）每个浏览器不一样

2.1 localStorage 的基本用法

// 设置（添加）localStorage 数据项
localStorage.setItem("username", "icoding");
// 获取 localStorage 数据项
localStorage.getItem("username");
// 移除 localStorage 数据项
localStorage.removeItem("username");
// 移除所有的 localStorage 数据项
localStorage.clear();
// length localStorage 中有存储多少数据
localStorage.length;

2.2 注意事项

  • localStorage 存储的数据，除非手动清除（如 通过 JS 删除 或 清除浏览器缓存）否则，数据永远不会过期的。它是持久化的本地存储。
  • sessionStorage 存储的数据，是当前会话结束（如 关闭浏览器）的时候，sessionStorage 中的数据会被清空
  • sessionStorage 的使用方法 与 localStorage 一模一样
  • localStorage 存储的键和值只能是字符串类型
  • 不同的域名不能共用 localStorage

2.3 封装

// 导出封装后的 localStorage 操作对象
export default {
  // set方法：根据key、value添加/修改数据（自动序列化对象类型）
  set(key, value) {
    if (typeof value === 'object' && value !== null) { 
      value = JSON.stringify(value);
    }
    localStorage.setItem(key, value);
  },

  // get方法：根据key获取值（自动尝试反序列化，失败则返回原始值）
  get(key) {
    const value = localStorage.getItem(key);
    if (value === null) { // 先判断key不存在的情况，直接返回null
      return null;
    }
    try {
      // 解析成功后，返回解析后的结果
      return JSON.parse(value);
    } catch (err) {
      // 解析失败（原始值为普通字符串），返回原始value
      return value;
    }
  },

  // remove方法：根据key移除指定项
  remove(key) {
    localStorage.removeItem(key);
  },

  // clear方法：清空当前域名下所有localStorage数据
  clear() {
    localStorage.clear();
  }
};

Cookie、localStorage、sessionStorage 的对比（面试题）

对比项CookieLocalStoragesessionStorage
存储大小4K5M5M
有效期手动设置无浏览器窗口关闭
存储位置浏览器浏览器浏览器
与请求一起发送是否否
访问限止子域可以访问自己和父域中的 Cookie同域下都可以访问只限当前窗口
avatar
文章
阅读
粉丝