如何从 cookie 创建和读取值？
Posted
技术标签:
【中文标题】如何从 cookie 创建和读取值？【英文标题】：How do I create and read a value from cookie? 【发布时间】：2011-06-17 01:49:51 【问题描述】：如何在 javascript 中创建和读取 cookie 中的值？
【问题讨论】：
怪癖模式有a good guide to JavaScript and cookies. FWIW，js-cookie 提供了一个非常好的 API 来处理它。 别忘了Web Storage API 在某些情况下可能是 cookie 的一个很好的替代品。 【参考方案1】：以下是可用于创建和检索 cookie 的函数。
function createCookie(name, value, days)
var expires;
if (days)
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
else
expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
function getCookie(c_name)
if (document.cookie.length > 0)
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1)
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1)
c_end = document.cookie.length;
return unescape(document.cookie.substring(c_start, c_end));
return "";
【讨论】：
如果您的 cookie 值包含不能很好地编码/解码的任何内容，这将不起作用。 at w3schools 似乎工作得很好 This simple wrapper from Mozilla 也提到了明确的 unicode 支持 @BradParks 太糟糕了，它是在 GPL 上发布的。 如果 cookie 没有值，这将不适用于 IE8 或 9，因为 IE 不会在 cookie 名称后添加等号 (=)。我们要做的是检查是否 indexOf("=")==-1，如果是，则使用整个 cookie 作为 cookie 名称。 @jahu 我想说它也在公共领域：developer.mozilla.org/en-US/docs/MDN/…【参考方案2】：简约且功能齐全的 ES6 方法：
const setCookie = (name, value, days = 7, path = '/') =>
const expires = new Date(Date.now() + days * 864e5).toUTCString()
document.cookie = name + '=' + encodeURIComponent(value) + '; expires=' + expires + '; path=' + path
const getCookie = (name) =>
return document.cookie.split('; ').reduce((r, v) =>
const parts = v.split('=')
return parts[0] === name ? decodeURIComponent(parts[1]) : r
, '')
const deleteCookie = (name, path) =>
setCookie(name, '', -1, path)
【讨论】：
有时cookie值本身可能包含=符号。在这种情况下，函数getCookie 将产生意想不到的结果。为避免这种情况，请考虑在 reduce const [n, ...val] = v.split('='); return n === name ? decodeURIComponent(val.join('=')) : r 内使用以下箭头函数体
如果可以选择不设置到期日期，那就太好了。这将允许在浏览器退出时自动删除 cookie。
***.com/a/48706852/87520 允许所有字符，并允许所有选项及其默认值。
864e5 = 86400000 = 1000*60*60*24 表示一天 24 小时中的毫秒数。
请注意，上面的getCooki 和reduce 不能正常工作于多个具有相同名称的cookie（可能用于不同的路径，例如@987654330 @ 和 /faq)。 Chrome 始终在 document.cookie 字符串的开头为当前路径提供 cookie。此 reducer 覆盖 r 值并返回最后找到的 cookie 值（因此 / 路径的值而不是当前路径值）。 Reduce 的性能也很差（在这种情况下不太重要），我在这里做了基准测试：measurethat.net/Benchmarks/Show/16012/2/…【参考方案3】：
JQuery Cookies
或纯 Javascript：
function setCookie(c_name,value,exdays)
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : ("; expires="+exdate.toUTCString()));
document.cookie=c_name + "=" + c_value;
function getCookie(c_name)
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0; i<ARRcookies.length; i++)
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
return unescape(y);
【讨论】：
我之所以标记这个主要是因为您提到了 JQuery Cookies。我会建议这样做。代码非常小，如果您已经在使用 JQuery，那么使用它就是正确的。【参考方案4】：ES7，对 get() 使用正则表达式。基于MDN
const Cookie =
get: name =>
let c = document.cookie.match(`(?:(?:^|.*; *)$name *= *([^;]*).*$)|^.*$`)[1]
if (c) return decodeURIComponent(c)
,
set: (name, value, opts = ) =>
/*If options contains days then we're configuring max-age*/
if (opts.days)
opts['max-age'] = opts.days * 60 * 60 * 24;
/*Deleting days from options to pass remaining opts to cookie settings*/
delete opts.days
/*Configuring options to cookie standard by reducing each property*/
opts = Object.entries(opts).reduce(
(accumulatedStr, [k, v]) => `$accumulatedStr; $k=$v`, ''
)
/*Finally, creating the key*/
document.cookie = name + '=' + encodeURIComponent(value) + opts
,
delete: (name, opts) => Cookie.set(name, '', 'max-age': -1, ...opts)
// path & domain must match cookie being deleted
Cookie.set('user', 'Jim', path: '/', days: 10)
// Set the path to top level (instead of page) and expiration to 10 days (instead of session)
用法 - Cookie.get(name, value [, options]): options 支持所有标准 cookie 选项并添加“days”：
路径：'/' - 任何绝对路径。 默认：当前文档位置， 域：'sub.example.com' - 不能以点开头。 默认：没有子域的当前主机。 secure：true - 仅通过 https 提供 cookie。 默认：假。 天：距离 cookie 过期还有 2 天。 默认：会话结束。 设置过期的替代方法： expires：'Sun，2018 年 2 月 18 日 16:23:42 GMT' - 到期日期为 GMT 字符串。 当前日期可以使用：new Date(Date.now()).toUTCString() 'max-age'：30 - 与天数相同，但以秒为单位而不是天数。其他答案使用“expires”而不是“max-age”来支持较旧的 IE 版本。这种方法需要 ES7，所以无论如何 IE7 都出来了（这没什么大不了的）。
注意：支持将“=”和“:”等有趣字符作为 cookie 值，并且正则表达式处理前导和尾随空格（来自其他库）。 如果您想存储对象，请在使用 JSON.stringify 和 JSON.parse 之前和之后对它们进行编码，编辑上述内容，或添加其他方法。例如：
Cookie.getJSON = name => JSON.parse(Cookie.get(name))
Cookie.setJSON = (name, value, opts) => Cookie.set(name, JSON.stringify(value), opts);
【讨论】：
投反对票的人能解释一下我的方法有什么问题吗？ 1.更短，而且 IMO 更容易维护。 2.更完整（是接受安全的唯一答案，任何参数顺序，max-age）。 3.更多标准默认值（路径等默认为标准，不像这里的大多数答案）。 4. 最佳实践（根据 MDN，正则表达式是提取值的最可靠方法）。 5. Futureprook（如果更多选项被添加到cookies，它们将被保留）。 6. 一个对象对代码的污染少于一堆函数。 7. 获取、设置、删除，轻松添加更多方法。 8. ES7（美味的流行语）。 1) vscode 告诉我我必须指定 ES9 支持才能使用此行-"delete: (name, opts) => Cookie.set(name, '', 'max-age '：-1，...选择）”。这也是你发现的吗？ 2）做一个Cookie.get，我可以只指定（名称）与（名称，值）。我可能不知道该值并正在使用 get 来检索它。 @Ric。 1. VSCode 没有报错。这自 ES7 以来一直有效，所以不知道你为什么会遇到问题。 2. 当您尝试检索该值时，您还不知道它。做 Cookie.get('name') w/o 没有值，如果它已经设置，它将返回值。希望有帮助:) 我完全支持你，我还以为是 ES7。这是错误消息图形的链接。感谢关于第 2 点的帮助。 i.imgur.com/uWNLXXE.png【参考方案5】：Mozilla 创建了一个simple framework for reading and writing cookies with full unicode support 以及如何使用它的示例。
一旦包含在页面中，您就可以设置 cookie：
docCookies.setItem(name, value);
读取 cookie：
docCookies.getItem(name);
或删除 cookie：
docCookies.removeItem(name);
例如：
// sets a cookie called 'myCookie' with value 'Chocolate Chip'
docCookies.setItem('myCookie', 'Chocolate Chip');
// reads the value of a cookie called 'myCookie' and assigns to variable
var myCookie = docCookies.getItem('myCookie');
// removes the cookie called 'myCookie'
docCookies.removeItem('myCookie');
在Mozilla's document.cookie page上查看更多示例和详细信息。
这个简单的 js 文件的一个版本是on github。
【讨论】：
请注意，MDN 上提供的 cookie 库是在 GPL 而非 LGPL 下发布的。 我需要导入什么javascript文件？没找到:( 查看本页“库”下的部分：developer.mozilla.org/en-US/docs/Web/API/document/… - 您可以将其保存到文件中并将其包含或粘贴到您想要使用的现有 js 文件中。 所以没有独立的 javascript 文件？所以这是一个代码 sn-p - 不是一个实际的库。 很棒的输入！ “库”是一个大约 80 行的单个 .js 文件；就是这个文件（在 GitHub 上）：github.com/madmurphy/cookies.js/blob/master/cookies.js【参考方案6】：我已经多次使用此线程的公认答案。这是一段很棒的代码：简单且可用。但我通常使用babel 和 ES6 和模块，所以如果你和我一样，这里有一些代码可以复制，以便更快地使用 ES6 进行开发
Accepted answer 用 ES6 重写为模块：
export const createCookie = (name, value, days) =>
let expires;
if (days)
let date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = '; expires=' + date.toUTCString();
else
expires = '';
document.cookie = name + '=' + value + expires + '; path=/';
;
export const getCookie = (name) =>
if (document.cookie.length > 0)
let c_start = document.cookie.indexOf(name + '=');
if (c_start !== -1)
c_start = c_start + name.length + 1;
let c_end = document.cookie.indexOf(';', c_start);
if (c_end === -1)
c_end = document.cookie.length;
return unescape(document.cookie.substring(c_start, c_end));
return '';
;
在此之后，您可以简单地将其作为任何模块导入（路径当然可能会有所不同）：
import createCookie, getCookie from './../helpers/Cookie';
【讨论】：
仅供参考：toGMTString() 已弃用：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…。请改用toUTCString()。【参考方案7】：
对于那些需要像 foo: 'bar' 这样保存对象的人，我分享了我编辑过的@KevinBurke 答案的版本。我已经添加了 JSON.stringify 和 JSON.parse，仅此而已。
cookie =
set: function (name, value, days)
if (days)
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
else
var expires = "";
document.cookie = name + "=" + JSON.stringify(value) + expires + "; path=/";
,
get : function(name)
var nameEQ = name + "=",
ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++)
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0)
return JSON.parse(c.substring(nameEQ.length,c.length));
return null;
所以，现在你可以这样做：
cookie.set('cookie_key', foo: 'bar', 30);
cookie.get('cookie_key'); // foo: 'bar'
cookie.set('cookie_key', 'baz', 30);
cookie.get('cookie_key'); // 'baz'
【讨论】：
【参考方案8】：这是Get, Set and Delete Cookie in JavaScript的代码。
function getCookie(name)
name = name + "=";
var cookies = document.cookie.split(';');
for(var i = 0; i <cookies.length; i++)
var cookie = cookies[i];
while (cookie.charAt(0)==' ')
cookie = cookie.substring(1);
if (cookie.indexOf(name) == 0)
return cookie.substring(name.length,cookie.length);
return "";
function setCookie(name, value, expirydays)
var d = new Date();
d.setTime(d.getTime() + (expirydays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = name + "=" + value + "; " + expires;
function deleteCookie(name)
setCookie(name,"",-1);
来源：http://mycodingtricks.com/snippets/javascript/javascript-cookies/
【讨论】：
两个链接都死了【参考方案9】：我喜欢这种在现代 JavaScript 中读取 cookie 的单行解决方案：
let cookies = Object.fromEntries(document.cookie.split(';').map(i=>i.trim().split('=')));
现在你有了一个带有键和值的 JavaScript 对象。
【讨论】：
对于编写 cookie，您有什么建议？【参考方案10】：我使用这个对象。值是经过编码的，所以在从服务器端读取或写入时需要考虑它。
cookie = (function()
/**
* Sets a cookie value. seconds parameter is optional
*/
var set = function(name, value, seconds)
var expires = seconds ? '; expires=' + new Date(new Date().getTime() + seconds * 1000).toGMTString() : '';
document.cookie = name + '=' + encodeURIComponent(value) + expires + '; path=/';
;
var map = function()
var map = ;
var kvs = document.cookie.split('; ');
for (var i = 0; i < kvs.length; i++)
var kv = kvs[i].split('=');
map[kv[0]] = decodeURIComponent(kv[1]);
return map;
;
var get = function(name)
return map()[name];
;
var remove = function(name)
set(name, '', -1);
;
return
set: set,
get: get,
remove: remove,
map: map
;
)();
【讨论】：
【参考方案11】：性能基准
比较一些流行的getCookie 函数的ES6 版本（经过我的改进）：
https://www.measurethat.net/Benchmarks/Show/16012/5/getcookie-for-vs-forof-vs-indexof-vs-find-vs-reduce
TL;DR：for...of 版本接缝对于现实生活中的 cookie 数据来说是最快的:)
重要提示：如果
path=/和当前页面路径（例如path=/faq）存在同名的cookie，document.cookie可以提供重复的cookie 名称 .但是当前路径的 cookie 将始终是字符串中的第一个，因此在使用此处提供的另一个答案中的reduce()版本时请注意这一点（它返回最后找到的 cookie，而不是第一个）。固定的
reduce()版本在我的回答中进一步。
对于..of 版本：
现实生活中的基准数据集最快（10 个长值 cookie）。但性能结果几乎与香草for 循环和Array.find() 相同，所以使用你喜欢的:)
function getCookieForOf(name)
const nameEQ = name + '=';
for (const cookie of document.cookie.split('; '))
if (cookie.indexOf(nameEQ) === 0)
const value = cookie.substring(nameEQ.length);
return decodeURIComponent(value); // returns first found cookie
return null;
IndexOf 版本
难以置信的快在 1000 个短值 cookie 的人工测试集中（因为它不会创建一个包含 1000 条记录的数组）。老实说，我认为测试代码中可能存在一个错误，使这个版本如此疯狂（如果你能找到一些，请告诉我）。无论如何，在真正的应用程序中不太可能有 1000 个 cookie ;)
对于具有 10 个长 cookie 的真实测试数据集来说，速度很慢。
function getCookieIndexOf(name)
const nameEQ = name + '=';
const cookies = document.cookie;
const cookieStart = cookies.indexOf(nameEQ);
if (cookieStart !== -1)
const cookieValueStart = cookieStart + nameEQ.length;
const cookieEnd = cookies.indexOf(';', cookieValueStart);
const value = cookies.substring(
cookieValueStart,
cookieEnd !== -1 ? cookieEnd : undefined
);
return decodeURIComponent(value); // returns first found cookie
return null;
Array.find() 版本
function getCookieFind(name)
const nameEQ = name + '=';
const foundCookie = document.cookie
.split('; ')
.find(c => c.indexOf(nameEQ) === 0); // returns first found cookie
if (foundCookie)
return decodeURIComponent(foundCookie.substring(nameEQ.length));
return null;
香草，老式，for-loop 版本；）
function getCookieFor(name)
const nameEQ = name + "=";
const ca = cookies.split('; ');
for(let i=0; i < ca.length; i++)
const c = ca[i];
if (c.indexOf(nameEQ) === 0)
const value = c.substring(nameEQ.length);
return decodeURIComponent(value); // returns first found cookie
return null;
// ES5 version:
function getCookieFor(name)
var nameEQ = name + "=";
var ca = cookies.split('; ');
for(var i=0;i < ca.length;i++)
var c = ca[i];
if (c.indexOf(nameEQ) === 0)
var value = c.substring(nameEQ.length);
return decodeURIComponent(value); // returns first found cookie
return null;
Array.reduce() 版本
来自@artnikpro 的this answer 的固定版本 - 返回第一个找到的 cookie，因此更适用于当前路径（例如 path=/faq）和 path=/ 的重复 cookie 名称。
此版本是所有性能测试中最慢的版本，因此应避免使用恕我直言。
function getCookieReduce(name)
return document.cookie.split('; ').reduce((r, v) =>
const [n, ...val] = v.split('='); // cookie value can contain "="
if(r) return r; // returns first found cookie
return n === name ? decodeURIComponent(val.join('=')) : r; // returns last found cookie (overwrites)
, '');
您可以在此处自行运行基准测试：https://www.measurethat.net/Benchmarks/Show/16012/5/getcookie-for-vs-forof-vs-indexof-vs-find-vs-reduce
setCookie() TypeScript 函数
这也是我使用encodeURIComponent、TypeScript 和SameSite 选项（将是required by Firefox soon）设置cookie 的函数版本：
function setCookie(
name: string,
value: string = '',
days: number | false = false, // session length if not provided
path: string = '/', // provide an empty string '' to set for current path (managed by a browser)
sameSite: 'none' | 'lax' | 'strict' = 'lax', // required by Firefox
isSecure?: boolean
)
let expires = '';
if (days)
const date = new Date(
Date.now() + days * 24 * 60 * 60 * 1000
).toUTCString();
expires = '; expires=' + date;
const secure = isSecure || sameSite === 'none' ? `; Secure` : '';
const encodedValue = encodeURIComponent(value);
document.cookie = `$name=$encodedValue$expires; path=$path; SameSite=$sameSite$secure`;
谷歌浏览器 Cookie 存储 API
感谢@oncode answer 值得一提的是，Google Chrome 团队已经提出了一些标准化（终于！我们仍然没有任何普遍接受的 cookie API 真是可笑）异步 Cookie Storage API（可在Google Chrome 从版本 87 开始）：https://wicg.github.io/cookie-store/
不幸的是，它仍然是非官方的，甚至不在 W3C 的考虑范围内，也不在 ES 提案中：github.com/tc39/proposals
很遗憾，我们仍然没有任何标准的 cookie API...
幸运的是，我们有 cookie-store 用于其他浏览器的 polyfill 为 npm package (gitHub)，这只是 1.7kB Gzipped ;)
【讨论】：
【参考方案12】：我已经使用js-cookie 成功了。
<script src="/path/to/js.cookie.js"></script>
<script>
Cookies.set('foo', 'bar');
Cookies.get('foo');
</script>
【讨论】：
【参考方案13】：您可以使用我的cookie ES module 获取/设置/删除 cookie。
用法：
在您的 head 标签中，包含以下代码：
<script src="https://raw.githack.com/anhr/cookieNodeJS/master/build/cookie.js"></script>
或
<script src="https://raw.githack.com/anhr/cookieNodeJS/master/build/cookie.min.js"></script>
现在您可以使用 window.cookie 在网页中存储用户信息。
cookie.isEnabled()
您的网络浏览器中是否启用了 cookie？
returns boolean true if cookie enabled.
例子
if ( cookie.isEnabled() )
console.log('cookie is enabled on your browser');
else
console.error('cookie is disabled on your browser');
cookie.set(名称，值)
设置一个 cookie。
name: cookie name.
value: cookie value.
例子
cookie.set('age', 25);
cookie.get(name[, defaultValue]);
获取一个 cookie。
name: cookie name.
defaultValue: cookie default value. Default is undefined.
returns cookie value or defaultValue if cookie was not found
var age = cookie.get('age', 25);
cookie.remove(名称);
删除 cookie。
name: cookie name.
cookie.remove( 'age' );
Example of usage
【讨论】：
【参考方案14】：我使用以下函数，这些函数是我通过从各种来源中找到的最好的东西编写的，并清除了一些错误或差异。
setCookie 函数没有高级选项，只是一些简单的东西，但代码很容易理解，这总是一个加号：
function setCookie(name, value, daysToLive = 3650) // 10 years default
let cookie = name + "=" + encodeURIComponent(value);
if (typeof daysToLive === "number")
cookie += "; max-age=" + (daysToLive * 24 * 60 * 60);
document.cookie = cookie + ";path=/";
function getCookie(name)
let cookieArr = document.cookie.split(";");
for (let i = 0; i < cookieArr.length; i++)
let cookiePair = cookieArr[i].split("=");
if (name == cookiePair[0].trim())
return decodeURIComponent(cookiePair[1].trim());
return undefined;
function deleteCookie(name)
setCookie(name, '', -1);
【讨论】：
【参考方案15】：chrome 团队提出了一种与 Cookie Storage API 异步管理 cookie 的新方法（从版本 87 开始在 Google Chrome 中可用）：https://wicg.github.io/cookie-store/
今天已经将它与其他浏览器的 polyfill 一起使用：https://github.com/mkay581/cookie-store
// load polyfill
import 'cookie-store';
// set a cookie
await cookieStore.set('name', 'value');
// get a cookie
const savedValue = await cookieStore.get('name');
【讨论】：
非常感谢分享这个！不幸的是，它仍然是非官方的，甚至不在 W3C 的考虑范围内，也不在 ES 提案之下：github.com/tc39/proposals 真遗憾，我们仍然没有任何标准的 cookie API……这太荒谬了：P 幸运的是cookie-store 压缩后只有 1.7kB ;) bundlephobia.com/package/cookie-store@3.0.0【参考方案16】：
在 ES6 中读取 cookie 的简单方法。
function getCookies()
var cookies = ;
for (let cookie of document.cookie.split('; '))
let [name, value] = cookie.split("=");
cookies[name] = decodeURIComponent(value);
console.dir(cookies);
【讨论】：
cookie 可以在值字符串中包含“=”。此代码不起作用。【参考方案17】：使用模板文字的非常短的 ES6 函数。请注意，您需要自己对值进行编码/解码，但它可以开箱即用，用于存储版本号等更简单的目的。
const getCookie = (cookieName) =>
return (document.cookie.match(`(^|;) *$cookieName=([^;]*)`)||[])[2]
const setCookie = (cookieName, value, days=360, path='/') =>
let expires = (new Date(Date.now()+ days*86400*1000)).toUTCString();
document.cookie = `$cookieName=$value;expires=$expires;path=$path;`
const deleteCookie = (cookieName) =>
document.cookie = `$cookieName=;expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/;`;
【讨论】：
【参考方案18】：通过类似于sessionStorage和localStorage的接口：
const cookieStorage =
getItem: (key)
const cookies = document.cookie.split(';')
.map(cookie => cookie.split('='))
.reduce(
(accumulation, [key, value]) => (...accumulation, [key.trim()]: value),
)
return cookies[key]
,
setItem: (key, value)
document.cookie = `$key=$value`
,
它的用法cookieStorage.setItem('', '')和cookieStorage.getItem('')。
【讨论】：
【参考方案19】：readCookie 的改进版本：
function readCookie( name )
var cookieParts = document.cookie.split( ';' )
, i = 0
, part
, part_data
, value
;
while( part = cookieParts[ i++ ] )
part_data = part.split( '=' );
if ( part_data.shift().replace(/\s/, '' ) === name )
value = part_data.shift();
break;
return value;
一旦你找到你的 cookie 值并返回它的值，这应该会中断。在我看来，双拆分非常优雅。
if 条件上的替换是一个空格修剪，以确保它正确匹配
【讨论】：
【参考方案20】：function setCookie(cname,cvalue,exdays)
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
function getCookie(cname)
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0)
return c.substring(name.length, c.length);
return "";
function checkCookie()
var user=getCookie("username");
if (user != "")
alert("Welcome again " + user);
else
user = prompt("Please enter your name:","");
if (user != "" && user != null)
setCookie("username", user, 30);
【讨论】：
【参考方案21】：我写了一个简单的cookieUtils，它有创建cookie、读取cookie和删除cookie三个函数。
var CookieUtils =
createCookie: function (name, value, expireTime)
expireTime = !!expireTime ? expireTime : (15 * 60 * 1000); // Default 15 min
var date = new Date();
date.setTime(date.getTime() + expireTime);
var expires = "; expires=" + date.toGMTString();
document.cookie = name + "=" + value + expires + "; path=/";
,
getCookie: function (name)
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length == 2)
return parts.pop().split(";").shift();
,
deleteCookie: function(name)
document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
;
【讨论】：
【参考方案22】：这是来自w3chools 的示例。
function setCookie(cname, cvalue, exdays)
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
function getCookie(cname)
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++)
var c = ca[i];
while (c.charAt(0) == ' ')
c = c.substring(1);
if (c.indexOf(name) == 0)
return c.substring(name.length, c.length);
return "";
【讨论】：
【参考方案23】：简单的阅读
var getCookie = function (name)
var valueStart = document.cookie.indexOf(name + "=") + name.length + 1;
var valueEnd = document.cookie.indexOf(";", valueStart);
return document.cookie.slice(valueStart, valueEnd)
【讨论】：
【参考方案24】：读取 cookie 的一种厚颜无耻的简单方法可能是这样的：
let username, id;
eval(document.cookie);
console.log(username + ", " + id); // John Doe, 123
如果您知道您的 cookie 包含以下内容，则可以使用此选项：username="John Doe"; id=123;。请注意，字符串需要在 cookie 中使用引号。可能不是推荐的方式，但适用于测试/学习。
【讨论】：
以上是关于如何从 cookie 创建和读取值？的主要内容，如果未能解决你的问题，请参考以下文章