如何在JavaScript中创建和读取cookie的值?
当前回答
一种厚脸皮的、简单的读取cookie的方法可能是这样的:
let username, id;
eval(document.cookie);
console.log(username + ", " + id); // John Doe, 123
如果您知道您的cookie包含以下内容,则可以使用此方法:用户名="John Doe";id = 123;。注意,字符串在cookie中需要引号。可能不是推荐的方法,但对测试/学习有效。
其他回答
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条件上的替换是一个空白修饰,以确保它正确匹配
对于读取简单的查询字符串,这一行代码可能在最新版本的JavaScript中适用:
let cookies = Object.fromEntries(document.cookie.split(';').map(i=>i.trim().split('=')));
现在你有了一个带有键和值的JavaScript对象。
对于创建,你可以试试这个:
let cookieObject = {foo: 'bar', ping: "pong"}
Object.entries(cookieObject).map((e)=>`${e[0]}=${e[1]}`).join(';')
简约且功能齐全的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 = (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
};
})();
我使用以下函数,这些函数是我从各种来源中找到的最好的函数,并剔除了一些错误或差异。
函数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);
}