如何使用 javascript 從 cookie 創建和讀取值？

Question

如何在 JavaScript 中創建和讀取 cookie 中的值？

Answer 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 "";
}

Answer 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)
}

Answer 3

jQuery Cookie

或純 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);
      }
   }
}

Answer 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 選項並添加“天數”：

• path : '/' - 任何絕對路徑。 默認值：當前文檔位置，
• domain : 'sub.example.com' - 不能以點開頭。 默認值：沒有子域的當前主機。
• 安全：true - 僅通過 https 提供 cookie。 默認值：假。
• days : 2 - 直到 cookie 過期的天數。 默認值：會話結束。
  設置過期的替代方法：
  • expires : 'Sun, 18 Feb 2018 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);

Answer 5

Mozilla 創建了一個簡單的框架，用於讀取和寫入完全支持 unicode 的 cookie，以及如何使用它的示例。

一旦包含在頁面中，您就可以設置 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 的 document.cookie 頁面上查看更多示例和詳細信息。

這個簡單的 js 文件的一個版本 在 github 上。

Answer 6

我已經多次使用這個線程的接受答案。 這是一段很棒的代碼：簡單且可用。 但我通常使用babel和 ES6 和模塊，所以如果你和我一樣，這里是復制代碼以便更快地使用 ES6 開發

接受的答案用 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';

Answer 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'

Answer 8

這是在 JavaScript 中獲取、設置和刪除 Cookie的代碼。

 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/

Answer 9

性能基准

一些流行的getCookie函數的ES6版本對比（經過我的改進）： https ://www.measurethat.net/Benchmarks/Show/16012/5/getcookie-for-vs-forof-vs-indexof-vs-find-vs -減少

TL;DR : for...of版本接縫對於現實生活中的 cookie 數據來說是最快的 :)

重要提示：如果path=/和當前頁面路徑（例如path=/faq ）有相同名稱的 cookie，則document.cookie可以提供重復的 cookie 名稱。 但是當前路徑的 cookie 將始終是字符串中的第一個，因此在使用此處提供的另一個答案中的reduce()版本時要注意這一點（它返回最后找到的 cookie 而不是第一個）。

固定reduce()版本在我的回答中更進一步。

對於..of 版本：

現實生活中的基准數據集最快（10 個長值 cookie）。 但是性能結果與 vanilla 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;
}

版本索引

在具有短值的 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 的這個答案的固定版本 - 返回第一個找到的 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() 打字稿函數

這也是我使用encodeURIComponent 、 TypeScript和SameSite選項設置 cookie 的函數版本（ Firefox 很快就會需要）：

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 的回答，值得一提的是，谷歌瀏覽器團隊已經提出了一些標准化（終於！我們仍​​然沒有任何普遍接受的 cookie API 真的很荒謬）異步 Cookie 存儲 API（谷歌瀏覽器從版本開始可用） 87): https://wigg.github.io/cookie-store/

不幸的是，它仍然是非官方的，甚至不在 W3C 的考慮范圍內，也不在 ES 提案中：github.com/tc39/proposals

真遺憾，我們仍然沒有任何標准的 cookie API……

幸運的是，我們有其他瀏覽器的cookie-store polyfill 作為npm 包( gitHub )，它只有1.7kB Gzipped ;)

Answer 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
};

})();

Answer 11

我喜歡這種在現代 JavaScript 中讀取 cookie 的單行解決方案：

let cookies = Object.fromEntries(document.cookie.split(';').map(i=>i.trim().split('=')));

現在你有了一個帶有鍵和值的 JavaScript 對象。

Answer 12

我已經使用js-cookie成功了。

<script src="/path/to/js.cookie.js"></script>
<script>
  Cookies.set('foo', 'bar');
  Cookies.get('foo');
</script>

Answer 13

您可以使用我的cookie ES 模塊獲取/設置/刪除 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]);

得到一個餅干。

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(名稱);

刪除餅干。

 name: cookie name.

例子

cookie.remove( 'age' );

使用示例

Answer 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);
}

Answer 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');

Answer 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);
}

Answer 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=/;`;
}  

Answer 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('') 。

Answer 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 條件上的替換是空格修剪，以確保它正確匹配

Answer 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);
       }
    }
}

Answer 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;';
    }
};

Answer 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 "";
}

Answer 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)
}

Answer 24

一種厚顏無恥且簡單的讀取 cookie 的方法可能是：

let username, id; 
eval(document.cookie); 
console.log(username + ", " + id); // John Doe, 123

如果您知道您的 cookie 包含以下內容，則可以使用此選項： username="John Doe"; id=123; username="John Doe"; id=123; . 請注意，字符串需要在 cookie 中使用引號。 可能不是推薦的方式，但適用於測試/學習。