【Vue】浏览器缓存 sessionStorage、localStorage、Cookie

嘿，各位 Vue 开发者们！今天咱们来好好聊聊浏览器里的三种缓存方式：sessionStorage、localStorage 和 Cookie。在实际开发中，合理运用这些缓存能让我们的应用性能大幅提升，同时避免一些不必要的问题。下面就跟着我的笔记，一起来深入了解它们吧！

一、概述

在 Web 开发里，缓存是个非常重要的概念。它能帮助我们减少对服务器的请求，提高页面的加载速度，增强用户体验。而 sessionStorage、localStorage 和 Cookie 就是浏览器为我们提供的几种本地缓存机制。

1. sessionStorage

sessionStorage 是 HTML5 新增的一个会话存储对象，它用于临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页后数据就会被清除。

2. localStorage

localStorage 同样是 HTML5 新增的一个会话存储对象，它用于长期保存数据，除非手动删除，否则数据不会过期。

3. Cookie

Cookie 是在 Web 服务器和浏览器之间传递的小段数据，它会在客户端和服务器之间来回传递，可设置过期时间。

二、使用方法

1. sessionStorage

存储数据

// 在 Vue 组件中使用
export default {
  methods: {
    setSessionData() {
      sessionStorage.setItem('username', 'John');
    }
  }
}

获取数据

export default {
  methods: {
    getSessionData() {
      const username = sessionStorage.getItem('username');
      console.log(username);
    }
  }
}

删除数据

export default {
  methods: {
    removeSessionData() {
      sessionStorage.removeItem('username');
    }
  }
}

清空所有数据

export default {
  methods: {
    clearSessionData() {
      sessionStorage.clear();
    }
  }
}

2. localStorage

存储数据

export default {
  methods: {
    setLocalData() {
      localStorage.setItem('email', 'john@example.com');
    }
  }
}

获取数据

export default {
  methods: {
    getLocalData() {
      const email = localStorage.getItem('email');
      console.log(email);
    }
  }
}

删除数据

export default {
  methods: {
    removeLocalData() {
      localStorage.removeItem('email');
    }
  }
}

清空所有数据

export default {
  methods: {
    clearLocalData() {
      localStorage.clear();
    }
  }
}

3. Cookie

存储数据

function setCookie(name, value, days) {
  let expires = "";
  if (days) {
    const date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

export default {
  methods: {
    setCookieData() {
      setCookie('user_id', '123', 7);
    }
  }
}

获取数据

function getCookie(name) {
  const nameEQ = name + "=";
  const ca = document.cookie.split(';');
  for (let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) === ' ') c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
}

export default {
  methods: {
    getCookieData() {
      const userId = getCookie('user_id');
      console.log(userId);
    }
  }
}

删除数据

function deleteCookie(name) {
  document.cookie = name + '=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}

export default {
  methods: {
    deleteCookieData() {
      deleteCookie('user_id');
    }
  }
}

三、区别与适用场景

1. 区别

2. 适用场景

• sessionStorage：适用于临时保存同一窗口（或标签页）的数据，如表单数据、临时状态等。
• localStorage：适用于长期保存数据，如用户偏好设置、缓存数据等。
• Cookie：适用于需要在客户端和服务器之间传递数据的场景，如用户登录状态、用户身份验证等。

四、避坑指南

1. 数据类型问题

sessionStorage 和 localStorage 只能存储字符串类型的数据。如果要存储对象或数组，需要先使用 JSON.stringify() 进行序列化，获取时再使用 JSON.parse() 进行反序列化。

// 存储对象
const user = { name: 'John', age: 30 };
localStorage.setItem('user', JSON.stringify(user));

// 获取对象
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser);

2. Cookie 安全问题

由于 Cookie 会在客户端和服务器之间来回传递，所以要注意防止 Cookie 被篡改或窃取。可以通过设置 HttpOnly 和 Secure 属性来提高 Cookie 的安全性。

// 设置 HttpOnly 和 Secure 属性的 Cookie
document.cookie = 'user_id=123; path=/; HttpOnly; Secure';

3. 兼容性问题

虽然 sessionStorage 和 localStorage 是 HTML5 新增的特性，但大多数现代浏览器都支持。在使用时，最好先检查浏览器是否支持这些特性。

if (typeof(Storage) !== "undefined") {
  // 支持 localStorage 和 sessionStorage
  localStorage.setItem('test', 'test value');
} else {
  // 不支持
  console.log('Your browser does not support Web Storage.');
}

五、总结

sessionStorage、localStorage 和 Cookie 各有优缺点，在实际开发中要根据具体需求选择合适的缓存方式。合理运用这些缓存机制，能让我们的 Vue 应用更加高效、稳定。希望这篇笔记能帮助大家更好地理解和使用这些浏览器缓存，避免一些常见的问题。

以上就是关于 Vue 中使用 sessionStorage、localStorage 和 Cookie 的详细介绍，大家有什么问题欢迎在评论区留言讨论！