返回

浏览器缓存 storage 神奇工具

前端

在现代网络开发中，浏览器缓存 storage 是不可或缺的一部分。它可以帮助开发人员存储和检索用户数据，提升用户体验并优化网站性能。浏览器缓存 storage 技术主要包括 cookie、localStorage、sessionStorage 和浏览器数据库IndexDB。

一、浏览器缓存 storage 技术对比

存储类型 特点 生命周期 存储容量 安全性 使用场景
cookie 过时技术，存储在客户端 浏览器关闭后失效 4KB 低 存储临时数据，如登录状态、购物车信息
localStorage 本地存储，存储在客户端 除非手动删除，否则一直有效 5MB 高 存储永久数据，如用户设置、应用数据
sessionStorage 会话存储，存储在客户端 浏览器关闭后失效 5MB 高 存储临时数据，如购物车信息、表单数据
IndexDB 浏览器数据库，存储在客户端 除非手动删除，否则一直有效 250MB 最高 存储大量结构化数据，如离线应用数据、多媒体数据

二、浏览器缓存 storage 封装

为了避免在无痕模式下浏览器存储无法使用，导致开发保存数据失败，我们可以对浏览器缓存 storage 进行通用封装。

const storage = {
  // 获取存储类型
  getType: () => {
    if (window.localStorage) {
      return 'localStorage';
    } else if (window.sessionStorage) {
      return 'sessionStorage';
    } else {
      return 'cookie';
    }
  },

  // 设置存储值
  set: (key, value) => {
    const type = storage.getType();
    switch (type) {
      case 'localStorage':
        window.localStorage.setItem(key, value);
        break;
      case 'sessionStorage':
        window.sessionStorage.setItem(key, value);
        break;
      case 'cookie':
        document.cookie = `${key}=${value}; path=/`;
        break;
    }
  },

  // 获取存储值
  get: (key) => {
    const type = storage.getType();
    switch (type) {
      case 'localStorage':
        return window.localStorage.getItem(key);
      case 'sessionStorage':
        return window.sessionStorage.getItem(key);
      case 'cookie':
        const cookies = document.cookie.split('; ');
        for (let i = 0; i < cookies.length; i++) {
          const cookie = cookies[i].split('=');
          if (cookie[0] === key) {
            return cookie[1];
          }
        }
        return null;
    }
  },

  // 移除存储值
  remove: (key) => {
    const type = storage.getType();
    switch (type) {
      case 'localStorage':
        window.localStorage.removeItem(key);
        break;
      case 'sessionStorage':
        window.sessionStorage.removeItem(key);
        break;
      case 'cookie':
        document.cookie = `${key}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/`;
        break;
    }
  }
};

三、结语

浏览器缓存 storage 是现代网络开发中不可或缺的一部分，它可以帮助开发人员存储和检索用户数据，提升用户体验并优化网站性能。对 cookie、localStorage、sessionStorage、浏览器数据库IndexDB 存储进行对比封装，并通过通用封装避免在无痕模式下导致数据存储失败，助力开发人员实现更安全、稳定的数据存储方案。