详解操作cookie的原生方法cookieStore

操作cookie是前端开发中经常会涉及到的技能之一。cookieStore是一个原生的JavaScript对象，它提供了一些方法来操作cookie。本攻略将详解cookieStore的使用方法。

获取cookie

使用cookieStore的get方法可以获取指定的cookie值。示例如下：

const cookieValue = cookieStore.get('cookie_name');
console.log(cookieValue);  // 输出cookie_name对应的cookie值

设置cookie

使用cookieStore的set方法可以设置指定的cookie值。示例如下：

cookieStore.set('cookie_name', 'cookie_value', {
  "expires": new Date("2050-01-01").toUTCString(), // 设置过期时间为2050年1月1日
  "path": "/",  // 设置cookie路径为根目录
  "domain": "example.com", // 设置cookie域为example.com
  "sameSite": "lax" // 设置跨站访问策略为lax
});

删除cookie

使用cookieStore的delete方法可以删除指定的cookie值。示例如下：

cookieStore.delete('cookie_name', {
  "path": "/"
});

示例说明

示例一：记录用户主题颜色

// 设置cookie，记录用户选择的主题颜色
const themeColor = 'red';
cookieStore.set('theme_color', themeColor, {
  "expires": new Date("2050-01-01").toUTCString(),
  "path": "/"
});

// 获取cookie，根据用户选择的主题颜色显示页面
const cookieValue = cookieStore.get('theme_color');
if (cookieValue === 'red') {
  document.body.style.backgroundColor = 'red';
} else if (cookieValue === 'blue') {
  document.body.style.backgroundColor = 'blue';
} else {
  document.body.style.backgroundColor = 'white';
}

示例二：跨站访问

在不同的子域名下共享cookie：

// 父域名example.com下设置cookie
cookieStore.set('cookie_name', 'cookie_value', {
  "expires": new Date("2050-01-01").toUTCString(),
  "path": "/",
  "domain": "example.com"
});

// 子域名sub.example.com获取cookie
const cookieValue = cookieStore.get('cookie_name');
console.log(cookieValue); // 输出cookie_value

总之，cookieStore提供了方便的方法来操作cookie，开发者只需调用相应方法并设置合适的参数即可轻松完成cookie操作。