资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

前端如何用cookies保存数据

创作时间:

作者:

@小白创作中心

前端如何用cookies保存数据

引用

来源

https://docs.pingcode.com/baike/2216333

Cookies是前端开发中常见的客户端数据存储方式，通过document.cookie API可以轻松读取、写入和删除Cookies。本文将详细介绍如何在前端使用Cookies保存数据，包括Cookies的基础概念、设置方法、读取方法、删除方法以及安全性注意事项。

一、COOKIES的基础概念

Cookies是存储在用户浏览器中的小型文本文件，用于保存用户会话数据。它们通常用于会话管理、个性化设置和用户跟踪。

什么是Cookies？

Cookies是由服务器发送并存储在客户端浏览器中的小数据文件。每当浏览器请求相同的服务器时，这些数据会被发送回服务器。Cookies主要用于：

会话管理：如用户登录信息、购物车内容等。
个性化设置：如用户首选项、主题颜色等。
用户跟踪：如分析用户行为、广告定位等。

Cookies的属性

每个Cookie都有以下属性：

Name：Cookie的名称。
Value：Cookie的值。
Domain：Cookie所属的域名。
Path：Cookie的路径。
Expires：Cookie的过期时间。
Secure：是否仅通过HTTPS传输。
HttpOnly：是否仅通过HTTP协议传输（防止XSS攻击）。

二、如何设置Cookies

设置Cookies主要通过document.cookie API来完成。以下是设置一个Cookie的基本语法：

document.cookie = "username=JohnDoe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

设置简单的Cookies

要设置一个简单的Cookie，只需要指定名称和值：

document.cookie = "username=JohnDoe";

设置带有过期时间的Cookies

为了让Cookie在特定时间后过期，可以使用expires属性：

const d = new Date();
d.setTime(d.getTime() + (7*24*60*60*1000)); // 7 days from now
let expires = "expires=" + d.toUTCString();
document.cookie = "username=JohnDoe; " + expires + "; path=/";

设置带有路径和域的Cookies

可以通过path和domain属性来指定Cookie的路径和域名：

document.cookie = "username=JohnDoe; path=/; domain=example.com";

三、如何读取Cookies

读取Cookies同样通过document.cookie API完成。document.cookie返回的是一个包含所有Cookie的字符串，每个Cookie之间用分号和空格分隔。

读取所有Cookies

let allCookies = document.cookie;
console.log(allCookies);

解析特定Cookie

为了读取特定的Cookie，可以编写一个函数来解析document.cookie返回的字符串：

function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}
let username = getCookie("username");
console.log(username);

四、如何删除Cookies

删除Cookie的方法是设置其过期时间为过去的时间点：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

五、Cookies的安全性

使用Cookies时，需要注意其安全性：

设置HttpOnly：防止通过JavaScript访问Cookie，减少XSS攻击风险。
设置Secure：确保Cookie仅通过HTTPS传输。
防止CSRF攻击：通过设置SameSite属性来防止跨站请求伪造。

六、Cookies的最佳实践

合理使用Cookies的大小

每个Cookie的大小限制为4KB，过多的Cookies会影响性能。因此，合理使用Cookies的大小非常重要。

使用合适的过期时间

根据数据的实际需求设置合理的过期时间，避免不必要的持久化存储。

避免存储敏感信息

尽量避免在Cookies中存储敏感信息，如密码、信用卡号等。

七、Cookies的替代方案

虽然Cookies在前端存储中有其独特优势，但也有其他替代方案，如：

LocalStorage：持久化存储，容量较大，适合存储大量数据。
SessionStorage：会话级存储，浏览器关闭后数据消失。
IndexedDB：浏览器内置的数据库，适合存储复杂的数据结构。

八、实际应用案例

案例一：用户登录状态管理

在用户登录后，可以将用户的登录信息存储在Cookies中，以便在后续请求中验证用户身份：

function setLoginCookie(username) {
  const d = new Date();
  d.setTime(d.getTime() + (1*24*60*60*1000)); // 1 day
  let expires = "expires=" + d.toUTCString();
  document.cookie = "username=" + username + "; " + expires + "; path=/";
}
function checkLogin() {
  let username = getCookie("username");
  if (username != "") {
    alert("Welcome again " + username);
  } else {
    username = prompt("Please enter your name:", "");
    if (username != "" && username != null) {
      setLoginCookie(username);
    }
  }
}

案例二：用户偏好设置

可以使用Cookies来存储用户的界面偏好设置，如主题颜色：

function setTheme(theme) {
  document.cookie = "theme=" + theme + "; path=/";
  document.body.className = theme;
}
function loadTheme() {
  let theme = getCookie("theme");
  if (theme != "") {
    document.body.className = theme;
  }
}
window.onload = loadTheme;