在 Javascript 中你可能有时需要访问 Cookie，获取 Cookie 值。
本文将介绍 JS 获取 Cookie 值的两种方法：
自定义函数获取 Cookie 值
使用第三方库获取 Cookie 值
自定义函数获取 Cookie 值获取 Cookie 值的自定义函数，你只需把我们提供自定义函数复制到你的代码中：
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
使用该函数获取 Cookie 值，
const cookie_value = getCookie('cookie_name');
推荐使用该方法获取 Cookie 值，代码非常少，而且简单易用。
使用第三方库获取 Cookie 值使用 js-cookie 第三方库获取 Cookie 值。
安装 js-cookie
npm install js-cookie
使用该库提供的函数获取 Cookie 值：
import Cookies from 'js-cookie';
const cookie_value = Cookies.get('cookie_name');
js-cookie 库源码附 js-cookie 库 UMD 格式源码，可以直接复制到文件中，在浏览器加载后就可使用，方便那些不知怎么安装 js-cookie ,或无法访问 github 的用户：
/*! js-cookie v3.0.5 | MIT */
;
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, (function () {
var current = global.Cookies;
var exports = global.Cookies = factory();
exports.noConflict = function () { global.Cookies = current; return exports; };
})());
})(this, (function () { 'use strict';
/* eslint-disable no-var */
function assign (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
target[key] = source[key];
}
}
return target
}
/* eslint-enable no-var */
/* eslint-disable no-var */
var defaultConverter = {
read: function (value) {
if (value[0] === '"') {
value = value.slice(1, -1);
}
return value.replace(/(%[\dA-F]{2})+/gi, decodeURIComponent)
},
write: function (value) {
return encodeURIComponent(value).replace(
/%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,
decodeURIComponent
)
}
};
/* eslint-enable no-var */
/* eslint-disable no-var */
function init (converter, defaultAttributes) {
function set (name, value, attributes) {
if (typeof document === 'undefined') {
return
}
attributes = assign({}, defaultAttributes, attributes);
if (typeof attributes.expires === 'number') {
attributes.expires = new Date(Date.now() + attributes.expires * 864e5);
}
if (attributes.expires) {
attributes.expires = attributes.expires.toUTCString();
}
name = encodeURIComponent(name)
.replace(/%(2[346B]|5E|60|7C)/g, decodeURIComponent)
.replace(/[()]/g, escape);
var stringifiedAttributes = '';
for (var attributeName in attributes) {
if (!attributes[attributeName]) {
continue
}
stringifiedAttributes += '; ' + attributeName;
if (attributes[attributeName] === true) {
continue
}
// Considers RFC 6265 section 5.2:
// ...
// 3. If the remaining unparsed-attributes contains a %x3B (";")
// character:
// Consume the characters of the unparsed-attributes up to,
// not including, the first %x3B (";") character.
// ...
stringifiedAttributes += '=' + attributes[attributeName].split(';')[0];
}
return (document.cookie =
name + '=' + converter.write(value, name) + stringifiedAttributes)
}
function get (name) {
if (typeof document === 'undefined' || (arguments.length && !name)) {
return
}
// To prevent the for loop in the first place assign an empty array
// in case there are no cookies at all.
var cookies = document.cookie ? document.cookie.split('; ') : [];
var jar = {};
for (var i = 0; i < cookies.length; i++) {
var parts = cookies[i].split('=');
var value = parts.slice(1).join('=');
try {
var found = decodeURIComponent(parts[0]);
jar[found] = converter.read(value, found);
if (name === found) {
break
}
} catch (e) {}
}
return name ? jar[name] : jar
}
return Object.create(
{
set,
get,
remove: function (name, attributes) {
set(
name,
'',
assign({}, attributes, {
expires: -1
})
);
},
withAttributes: function (attributes) {
return init(this.converter, assign({}, this.attributes, attributes))
},
withConverter: function (converter) {
return init(assign({}, this.converter, converter), this.attributes)
}
},
{
attributes: { value: Object.freeze(defaultAttributes) },
converter: { value: Object.freeze(converter) }
}
)
}
var api = init(defaultConverter, { path: '/' });
/* eslint-enable no-var */
return api;
}));
结语本文介绍了使用自定义函数获取 Cookie 值、使用第三方库获取 Cookie 值两种方法 获取 Cookie 值。