如何从cookie创建和读取值？

Question

如何在JavaScript中创建和读取cookie中的值？

Answer 1

以下是可用于创建和检索Cookie的函数.

var createCookie = function(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 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);
      }
   }
}

Answer 4

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页面的更多示例和详细信息,请参阅.

Answer 5

ES7，将正则表达式用于get（）。基于MDN

const Cookie =
    { get: name => {
        let c = document.cookie.match(`(?:(?:^|.*; *)${name} *= *([^;]*).*$)|^.*$`)[1]
        if (c) return decodeURIComponent(c)
        }
    , set: (name, value, opts = {}) => { 
        if (opts.days) { 
            opts['max-age'] = opts.days * 60 * 60 * 24; 
            delete opts.days 
            }
        opts = Object.entries(opts).reduce((str, [k, v]) => `${str}; ${k}=${v}`, '')
        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]）：
选项支持所有标准cookie选项并添加“天”：

• path：'/'-任何绝对路径。默认值：当前文档位置，
• 域：“ sub.example.com”-不能以点开头。默认值：没有子域的当前主机。
• secure：true-仅通过https提供cookie。默认值：false。
• 天：2天-直到cookie过期。默认值：会话结束。
  设置到期时间的其他方法：
  • 过期：'Sun，18 Feb 2018 16:23:42 GMT'-到期日期为GMT字符串。
    当前日期可以通过以下方式获取：new Date（Date.now（））。toUTCString（）
  • “最大年龄”：30-与天相同，但以秒而不是天为单位。

其他答案使用“过期”而不是“最大年龄”来支持较旧的IE版本。此方法需要ES7，因此IE7仍然可用（这没什么大不了的）。

注意：Cookie值支持有趣的字符，例如“ =”和“ {：}”，而regex处理前导和尾随空格（来自其他库）。
如果要存储对象，请使用和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 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.toGMTString();
  } 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

这是在 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 8

对于那些需要像{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'