前端 Cookie 无法存储、获取及跨域携带问题的根源与解决方案。核心原因包括属性配置错误（如 domain/path/secure/SameSite）、跨域 CORS 未协同、浏览器安全策略限制等。文章提供 Cookie 核心属性规则、通用基础配置方案（含原生 JS/Vue/React/Axios 代码）、7 大高频场景专项解决步骤（同域共享、跨域携带、代理配置等）以及 6 步排查流程。遵循属性合规、跨域协同、操作封装三大原则，可彻底解决登录态失效、用户信息丢失等常见问题。
Cookie 作为前端轻量存储、登录态维持、同/跨域数据传递的核心方案，因设置错误引发的无法存储、存储后无法获取、跨域请求无法携带问题，是前端开发中最高频的网络/存储类 BUG，常表现为登录态瞬间失效、刷新页面后用户信息丢失、跨域接口请求无身份凭证、document.cookie读取为空、Cookie 在浏览器 Application 面板中无记录，严重时会导致用户鉴权、数据同步、跨域交互等核心功能异常。
这类问题的核心根源分为三类：一是 Cookie 核心属性配置错误（domain/path/expires/secure/SameSite/httpOnly是重灾区），违背浏览器 Cookie 存储/读取/携带的基础规则；二是跨域场景下前后端未协同配置，前端未开启请求凭证、后端未放开 CORS 跨域 Cookie 携带权限，导致跨域请求头无法带上 Cookie；三是浏览器安全策略限制（如 HTTP 页面无法存储 secureCookie、无痕模式屏蔽第三方 Cookie、SameSite 策略阻止跨站 Cookie 携带）。少数场景是因原生 Cookie 操作逻辑不规范、框架/请求库未配置凭证参数、同名 Cookie 属性冲突导致覆盖。
解决该问题的核心思路是：先掌握 Cookie 核心属性的底层规则（从根源避免配置错误）、再规范 Cookie 的存储/获取操作逻辑、跨域场景下前后端严格协同配置 CORS+Cookie 跨域参数、适配浏览器安全策略，核心遵循「属性配置符合浏览器规则、跨域凭证前后端一致、操作逻辑封装避坑」三大原则。
本文从 Cookie 的底层存储/读取规则出发，厘清所有问题的核心触发原因，先讲解 Cookie 核心属性的必懂知识（所有问题的排查基础），再给出通用基础解决方案（零成本解决 80% 的问题），接着分 7 大高频场景（按出现概率排序）提供错误示例、核心原因、可直接复制的前后端解决代码，覆盖原生 JS 开发、Vue/React 框架、Axios/Fetch 请求库、跨域/同域部署等所有常见场景，最后给出 6 步通用排查流程和开发避坑点，彻底解决 Cookie 无法存储/获取/跨域携带的问题。
所有 Cookie 相关问题的本质都是对核心属性理解错误、配置不符合浏览器规则，解决问题前必须先掌握 Cookie 的 6 个核心属性作用、默认值和配置禁忌，以及浏览器的存储/读取/跨域携带规则，这是排查和解决所有问题的基础。
Cookie 的每个属性都直接决定其存储范围、有效期、可访问性、跨域携带性，前端通过 document.cookie设置、后端通过 Set-Cookie响应头设置，后端设置的优先级高于前端（部分属性如 httpOnly仅能由后端设置）。以下是核心属性的详细说明，红色标注为高频配置错误点：
| 属性名 | 核心作用 | 前端是否可设置 | 默认值 | 常见配置错误 & 影响 |
|---|---|---|---|---|
name=value | Cookie 的键值对，唯一标识 | 是 | 无 | 同 domain+path下同名会覆盖原有 Cookie，导致失效 |
domain | 配置 Cookie 的有效域名，仅该域名/子域可访问 | 是 | 当前页面的域名（不含子域） | 1. 配置为非当前域名的顶级域（如当前 a.test.com配b.test.com），Cookie 无法存储；2. 未配置导致子域（如 api.test.com）无法访问主域（test.com）的 Cookie |
path | 配置 Cookie 的有效路径，仅该路径下的页面可访问 | 是 | 当前页面的路径（如 /user） | 配置为 /admin但在/home路径下获取，导致无法读取；默认路径过窄导致同域名不同路径无法共享 |
expires/max-age | 配置有效期： | |||
expires：绝对时间（GMT 格式） | ||||
max-age：相对秒数（正数有效、0 删除、-1 会话级） | 是 | -1（会话级 Cookie） | 未配置导致 Cookie 为「会话级」，浏览器关闭/页面刷新后立即消失，这是无法存储的最高频原因 | |
secure | 仅在HTTPS 协议下才会存储和携带 Cookie | 是 | false | HTTP 页面中设置 secure=true，Cookie 无法存储；跨域 HTTPS 请求未设该属性，部分浏览器会阻止携带 |
SameSite | 控制跨站请求是否携带 Cookie，防 CSRF： | |||
Strict：仅同站请求携带 | ||||
Lax：默认，跨站导航（如 a 标签）携带、AJAX 请求不携带 | ||||
None：所有跨站请求都携带 | 是 | Lax（Chrome80+） | 跨域 AJAX 请求未将 SameSite设为None，导致 Cookie 无法携带；设 None时未配合secure=true，Cookie 无法存储 | |
httpOnly | 禁止**前端 JS（document.cookie）**读取该 Cookie，仅后端可通过请求头获取 | 仅后端可设 | false | 后端误设 httpOnly=true，导致前端无法通过 JS 获取 Cookie（如获取用户 token） |
浏览器仅会存储符合当前页面域名、协议、路径规则的 Cookie，任一条件不满足则存储失败：
secure=true的 Cookie 仅 HTTPS 页面可存储，HTTP 页面直接忽略；domain必须是当前页面域名的顶级域/自身域（如当前 a.test.com，可配 a.test.com/test.com，不可配 b.test.com/baidu.com）；path为 Cookie 的有效路径，子路径可访问父路径的 Cookie（如 /可访问/user的 Cookie，反之则不行），建议统一配为 /。document.cookie）：仅能读取**非 httpOnly、当前域名 + 路径匹配、非 secure（HTTP 页面）**的 Cookie；Cookie请求头读取所有域名 + 路径匹配、随请求携带的 Cookie，包括 httpOnly=true的 Cookie（这是登录态 Cookie 的安全配置）。Cookie 跨域携带的必要且充分条件（缺一不可）：
withCredentials=true）；Access-Control-Allow-Credentials: true，且 Access-Control-Allow-Origin不可为 *（必须是具体域名，如 https://front.test.com）；SameSite=None+secure=true，domain配置为跨域双方的公共顶级域（如前端 front.test.com、后端 api.test.com，配 domain=test.com）。这是解决 Cookie 所有问题的核心通用方案，无需复杂改造，仅需规范核心属性配置、封装正确的 Cookie 操作函数、跨域时前后端按规则配置基础参数，就能零成本解决 80% 的无法存储/获取/跨域携带问题，代码可直接复制使用，覆盖所有开发场景。
遵循**「最简有效配置」**原则，按以下规则配置 Cookie 属性，从根源避免存储/读取失败，这是所有场景的基础配置：
expires/max-age：避免会话级 Cookie，建议 max-age=86400*7（7 天有效期）；path=/：让同域名下所有路径都能访问 Cookie，避免路径匹配失败；test.com、子域 a.test.com/api.test.com，统一配 domain=test.com，实现同域名下所有子域共享；secure=true，跨域请求必配 SameSite=None+secure=true；httpOnly（设置也无效），仅后端在需要防止 XSS 窃取 Cookie（如登录态 token）时设置 httpOnly=true。/**
* 通用 Cookie 设置函数（规范配置核心属性）
* @param {string} name - Cookie 名
* @param {string} value - Cookie 值
* @param {number} days - 有效期（天），默认 7 天
* @param {string} domain - 有效域名，如 test.com
* @param {boolean} isCross - 是否跨域携带，默认 false
*/
function setCookie(name, value, days = 7, domain = 'test.com', isCross = false) {
const exp = new Date();
exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000);
// 核心属性拼接
let cookieStr = `${encodeURIComponent(name)}=${encodeURIComponent(value)};`;
cookieStr += `max-age=${days * 86400};`; // 优先用 max-age（兼容性更好）
cookieStr += `path=/;`;
cookieStr += `domain=${domain};`;
// 跨域/HTTPS 配置
if (isCross || location.protocol === 'https:') {
cookieStr += `secure=true;`;
}
if (isCross) {
cookieStr += ;
}
. = cookieStr;
}
(, , , );
(, , , , );
原生 document.cookie返回的是所有有效 Cookie 的拼接字符串（如 token=123; name=test），直接读取易出错，且删除 Cookie 需通过 max-age=0实现，封装通用函数可避免手动处理的坑。
// 1. 获取 Cookie：根据 name 读取对应值
function getCookie(name) {
const cookieArr = document.cookie.split('; ');
for (let i = 0; i < cookieArr.length; i++) {
const [key, value] = cookieArr[i].split('=');
if (decodeURIComponent(key) === name) {
return decodeURIComponent(value);
}
}
return ''; // 未找到返回空
}
// 2. 删除 Cookie：通过 max-age=0 实现，属性需与设置时一致（domain+path）
function delCookie(name, domain = 'test.com') {
setCookie(name, '', 0, domain); // 有效期设为 0，本质是覆盖原有 Cookie
}
// 调用示例
getCookie('token'); // 读取 token：123456
delCookie('token', 'test.com'); // 删除 token
跨域 Cookie 携带失败是最高频的跨域问题，核心原因是前后端未同时开启凭证支持，以下是原生 Fetch/Axios（前端）和Node.js/Nginx（后端）的基础配置，必须严格配合，任一环节缺失都会导致携带失败。
// 示例 1：Fetch 请求开启凭证
fetch('https://api.test.com/api/user', {
method: 'GET',
credentials: 'include' // 核心：开启跨域凭证携带（include=所有跨域请求都带，same-origin=仅同域带）
});
// 示例 2：Axios 请求开启凭证（全局配置/单个请求配置）
import axios from 'axios';
// 全局配置（推荐，所有请求都生效）
axios.defaults.withCredentials = true;
// 单个请求配置
axios.get('https://api.test.com/api/user', {
withCredentials: true
});
const express = require('express');
const cors = require('cors');
const app = express();
// 核心 CORS 配置（必须配具体域名，不可为*）
app.use(cors({
origin: 'https://front.test.com', // 前端具体域名（跨域来源）
credentials: true, // 核心：放开凭证携带权限
methods: ['GET', 'POST', 'PUT', 'DELETE'], // 允许的请求方法
allowedHeaders: ['Content-Type', 'Authorization'] // 允许的请求头
}));
// 后端设置 Cookie（跨域场景，必须配 SameSite=None+secure+domain）
app.get('/api/setCookie', (req, res) => {
res.cookie('token', '123456', {
maxAge: 7 * 86400 * 1000,
path: '/',
domain: 'test.com', // 前后端公共顶级域
secure: true,
sameSite: 'none',
httpOnly: true // 登录态 Cookie 建议设 httpOnly，防止 XSS
});
res.send('Cookie 设置成功');
});
app.();
server {
listen 443 ssl;
server_name api.test.com;
# SSL 配置（HTTPS 必备）
ssl_certificate /ssl/api.test.com.pem;
ssl_certificate_key /ssl/api.test.com.key;
# 核心 CORS 配置
add_header Access-Control-Allow-Origin https://front.test.com; # 具体前端域名
add_header Access-Control-Allow-Credentials true; # 放开凭证
add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
add_header Access-Control-Allow-Headers Content-Type,Authorization;
# 处理 OPTIONS 预检请求
if ($request_method = OPTIONS) {
return 204;
}
# 接口转发
location /api {
proxy_pass http://127.0.0.1:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}
通用基础方案解决后，剩余 20% 的问题主要源于浏览器安全策略限制、框架请求库配置错误、同名 Cookie 覆盖、第三方 Cookie 屏蔽、本地开发代理配置错误等场景，以下按出现概率从高到低排序，每个场景均提供错误示例 + 核心原因 + 可直接复制的前后端解决代码，覆盖原生 JS、Vue/React、Axios、本地开发/生产部署等所有开发场景。
执行 document.cookie设置后，浏览器 Application 面板（Storage→Cookie）无该 Cookie 记录，或刷新页面/关闭标签后 Cookie 立即消失，getCookie读取为空。
// 错误 1：未配置 expires/max-age，为会话级 Cookie，刷新消失
document.cookie = 'token=123456; path=/; domain=test.com';
// 错误 2：HTTP 页面设置 secure=true，Cookie 被浏览器忽略，无法存储
document.cookie = 'token=123456; max-age=604800; path=/; domain=test.com; secure=true';
// 错误 3：domain 配置为非当前域名的外部域，无法存储
document.cookie = 'token=123456; max-age=604800; path=/; domain=baidu.com';
expires/max-age：Cookie 为「会话级」，浏览器仅在当前会话（标签页打开期间）保留，刷新/关闭后立即销毁（最高频原因）；secure=true，浏览器因安全策略直接忽略该 Cookie；domain配置为当前页面域名的外部域（如 test.com配baidu.com），或子域配主域的上级域（如 a.test.com配test.cn）；SameSite=None必须与 secure=true同时配置，否则 Cookie 无法存储。// 正确配置：必配 max-age + 协议匹配 + 合法 domain
function setValidCookie() {
const isHttps = location.protocol === 'https:';
let cookieStr = 'token=123456; max-age=604800; path=/; domain=test.com;';
// 仅 HTTPS 页面配 secure
if (isHttps) cookieStr += 'secure=true;';
// 跨域才配 SameSite=None，且必须配合 secure
// cookieStr += 'SameSite=None; secure=true;';
document.cookie = cookieStr;
}
setValidCookie();
验证：设置后打开浏览器「F12→Application→Storage→Cookie→当前域名」，能看到该 Cookie 即表示存储成功。
document.cookie无法获取（高频）浏览器 Application 面板中能看到该 Cookie 记录，但前端执行 document.cookie或封装的 getCookie函数读取为空，无法获取值。
// 前端设置（看似正常）
document.cookie = 'token=123456; max-age=604800; path=/; domain=test.com;';
// 前端读取：返回空
console.log(getCookie('token')); // ''
httpOnly=true：这是最高频原因，httpOnly属性仅能由后端设置，一旦开启，前端 JS 完全无法读取该 Cookie（仅后端可通过请求头获取）；domain/path与当前页面不匹配：如 Cookie 配 path=/admin，但在 /home路径下读取；配 domain=a.test.com，但在 b.test.com页面读取；domain/path为「跨级」：如 Cookie 配 path=/user，在 /user/info路径下可读取，但在 /home路径下不可读取；secure=true，但前端页面为 HTTP 协议：浏览器阻止 HTTP 页面读取 secure标记的 Cookie。httpOnly属性：打开浏览器 Application 面板，查看该 Cookie 的 HttpOnly列是否为 √，若是则联系后端修改为 httpOnly=false（若需前端读取）；
httpOnly=true，避免 XSS 窃取，前端无需读取，由后端通过请求头鉴权即可；domain/path匹配：确保当前页面的域名/路径是 Cookie domain/path的「子域/子路径」，统一将 Cookie path配为 /可避免路径问题；secure=trueCookie，需在 HTTPS 页面读取，HTTP 页面无法读取。主域 test.com或子域 a.test.com设置的 Cookie，在另一子域 b.test.com或同域名不同路径 /admin下无法读取，即同域名下 Cookie 无法共享。
// 在 a.test.com 页面设置 Cookie（未配顶级域）
document.cookie = 'token=123456; max-age=604800; path=/; domain=a.test.com;';
// 在 b.test.com 页面读取：返回空
console.log(getCookie('token')); // ''
// 在 /test/home 页面设置 Cookie（配具体路径）
document.cookie = 'name=test; max-age=604800; path=/home; domain=test.com;';
// 在 /test/admin 页面读取：返回空
console.log(getCookie('name')); // ''
/，导致同域名下其他路径无法访问；domain+path，仅子域/子路径可访问父域/父路径的 Cookie，反之则不行。domain为顶级域、path为根路径// 同域名所有子域/路径共享 Cookie 的正确配置
// 主域/所有子域页面都按此设置
document.cookie = 'token=123456; max-age=604800; path=/; domain=test.com;';
document.cookie = 'name=test; max-age=604800; path=/; domain=test.com;';
核心结论：同域名下所有子域/路径共享 Cookie 的唯一配置：domain=顶级公共域+path=/。
前端页面（https://front.test.com）向跨域后端接口（https://api.test.com）发起请求，浏览器 Application 面板中有 Cookie，但后端通过 req.cookies/req.headers.cookie无法获取，请求头中无 Cookie字段。
// 前端 Axios 请求（未开凭证）
axios.get('https://api.test.com/api/user').then(res => console.log(res)).catch(err => console.log(err));
// 后端 Node.js 读取（返回空）
app.get('/api/user', (req, res) => {
console.log(req.cookies); // {} 空对象
res.send('用户信息');
});
这是跨域 Cookie 携带的经典问题，核心是前后端未同时满足跨域携带的 3 个必要条件（见 1.2 节），常见缺失点：
withCredentials=true（Axios）/credentials: 'include'（Fetch）；Access-Control-Allow-Origin设为 *，而非具体前端域名；Access-Control-Allow-Credentials: true；SameSite=None+secure=true（Chrome80+）；domain未配置为前后端的公共顶级域。// Vue/React 项目中，在 axios 封装文件中配置
import axios from 'axios';
// 1. 开启跨域凭证携带
axios.defaults.withCredentials = true;
// 2. 配置基础请求地址
axios.defaults.baseURL = 'https://api.test.com';
// 3. 测试请求
axios.get('/api/user').then(res => console.log(res));
app.use(cors({
origin: 'https://front.test.com', // 必须是具体前端域名，不可为*
credentials: true // 必须开启，放开凭证携带
}));
// 前端设置 Cookie
setCookie('token', '123456', 7, 'test.com', true); // isCross=true → SameSite=None+secure
// 或后端设置 Cookie
res.cookie('token', '123456', {
maxAge: 7 * 86400 * 1000,
path: '/',
domain: 'test.com', // 前后端公共顶级域
secure: true,
sameSite: 'none',
httpOnly: true
});
验证：发起请求后，打开浏览器「F12→Network→该请求→Request Headers」，能看到 Cookie: token=123456即表示携带成功。
Vue/React 本地开发时，通过 vue-cli/vite/create-react-app配置的代理请求后端接口，Cookie 无法携带到后端，后端读取为空。
// vite.config.js 错误代理配置
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'https://api.test.com', // 后端接口
changeOrigin: true, // 仅开启跨域源
// 缺失核心配置
}
}
}
});
本地开发的代理请求本质是前端代理服务器向后端发起请求，而非浏览器直接发起，若未在代理配置中开启凭证转发，代理服务器会忽略浏览器的 Cookie，导致无法携带到后端。
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
server: {
proxy: {
'/api': {
target: 'https://api.test.com',
changeOrigin: true,
cookieDomainRewrite: 'localhost', // 核心 1：Cookie 域名重写为本地
secure: true, // 核心 2：HTTPS 接口需开启
withCredentials: true // 核心 3：开启凭证转发
}
}
}
});
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'https://api.test.com',
changeOrigin: true,
withCredentials: true, // 核心：开启凭证转发
pathRewrite: { '^/api': '' }
}
}
}
};
// setupProxy.js（src 目录下）
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use('/api', createProxyMiddleware({
target: 'https://api.test.com',
changeOrigin: true,
withCredentials: true // 核心：开启凭证转发
}));
};
补充：本地开发时，前端请求地址需改为本地代理地址（如 /api/user），而非直接请求后端跨域地址。
正常浏览器窗口中 Cookie 可正常存储/携带，但在无痕模式/隐私模式下，Cookie 无法存储，或跨域请求无法携带，第三方 Cookie 读取为空。
a.com页面向b.com发起请求，b.com的 Cookie 为第三方 Cookie）；SameSite=None的 Cookie，且不保留会话级 Cookie。front.test.com/api代理后端 api.test.com接口），让 Cookie 成为第一方 Cookie；localStorage/sessionStorage（不受 Cookie 策略限制，但无法跨域携带）；若为跨域鉴权，可改用Token 放在请求头（如 Authorization: Bearer token）的方案，彻底替代 Cookie。设置多个 Cookie 后，部分 Cookie 无法存储，或读取到的是错误值，刷新后部分 Cookie 消失。
// 先后设置两个同名 Cookie，domain 不同
document.cookie = 'token=123; max-age=604800; path=/; domain=a.test.com;';
document.cookie = 'token=456; max-age=604800; path=/; domain=test.com;';
// 读取时可能获取到错误值，或其中一个被覆盖
浏览器的Cookie 覆盖规则：**同一 name+同一 domain+同一 path**的 Cookie，后设置的会直接覆盖先设置的；若 name相同但 domain/path不同，会视为两个独立 Cookie，但部分浏览器会因策略限制屏蔽其中一个。
a_token（a.test.com）、api_token（api.test.com）；domain/path一致，避免重复设置；// 正确做法：先删除，再设置
delCookie('token', 'a.test.com');
delCookie('token', 'test.com');
// 重新设置唯一的 token
document.cookie = 'token=123456; max-age=604800; path=/; domain=test.com;';
遇到 Cookie 无法存储/获取/跨域携带问题，无需盲目修改代码，按以下6 步流程执行，可 100% 定位问题根源，适合所有开发场景，新手也能快速上手。
这是最基础、最关键的一步：打开浏览器「F12→Application→Storage→Cookie→当前域名」，查看是否有目标 Cookie 记录。
expires/secure/domain/SameSite）、浏览器协议（HTTP/HTTPS）；针对 Application 面板中的 Cookie，逐一检查属性：
expires/max-age：是否为过期时间，是否配置了有效值；domain/path：是否与当前页面的域名/路径匹配；httpOnly：是否为 √（若前端需读取，需改为 ×）；secure：是否为 √，当前页面是否为 HTTPS 协议；SameSite：是否为 None（跨域请求需配），且是否配合 secure=true。front.test.com vs api.test.com），若是跨域则进入下一步；withCredentials=true（Axios）/credentials: 'include'（Fetch）；Access-Control-Allow-Credentials: true，Access-Control-Allow-Origin是否为具体前端域名（非 *）；Cookie字段，响应头是否有 Set-Cookie字段。withCredentials=true（凭证转发）；secure属性匹配。httpOnly=true，是否正确设置了 Cookie 的 domain/path/SameSite；document.cookie能读取到正确值即成功；Cookie字段，后端能读取到即成功。掌握以下8 个开发避坑点，能从根源上减少 99% 的 Cookie 无法存储/获取/跨域携带问题，同时让 Cookie 操作更规范、更安全，也是前端 Cookie 开发的通用最佳实践：
expires/max-age：永远不要依赖默认的会话级 Cookie，这是无法存储的最高频原因；path=/：让同域名下所有路径都能访问 Cookie，避免路径匹配失败的低级错误；withCredentials=true+后端 Allow-Credentials=true，且后端 Allow-Origin不可为 *；httpOnly仅由后端设置：前端设置无效，敏感 Cookie（如 token）建议设 httpOnly=true，防止 XSS 窃取；withCredentials=true，否则 Cookie 无法转发到后端；secureCookie 的存储/携带，还能提升页面安全性，避免浏览器安全策略限制。前端 Cookie 无法存储/获取/跨域携带的问题，核心根源是对 Cookie 核心属性的理解错误、配置不符合浏览器规则，以及跨域场景下前后端未协同配置 CORS+Cookie 跨域参数，其中未配置 expires/max-age、跨域未开启凭证支持、httpOnly误设、SameSite配置错误是最高频的四大原因，占比超 90%。
核心解决思路可总结为3 个核心原则，能解决 99% 的 Cookie 问题，覆盖所有开发场景：
expires/max-age、统一 path=/、跨域配 SameSite=None+secure=true，遵循浏览器的域名/协议/路径匹配规则；遵循本文的Cookie 核心属性知识、通用基础解决方案、7 大高频场景专项解决代码和6 步通用排查流程，严格遵守开发避坑点，即可彻底解决 Cookie 相关的所有问题，让 Cookie 在登录态维持、数据存储、跨域交互中发挥正常作用。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online