Làm cách nào để tạo và đọc giá trị từ cookie?

Làm cách nào tôi có thể tạo và đọc một giá trị từ cookie trong JavaScript?

Dưới đây là các chức năng bạn có thể sử dụng để tạo và truy xuất 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 "";
}

Cách tiếp cận ES6 tối giản và đầy đủ tính năng:

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 JQuery

hoặc Javascript đơn giản:

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

Mozilla cung cấp một khung đơn giản để đọc và viết cookie với sự hỗ trợ unicode đầy đủ cùng với các ví dụ về cách sử dụng nó.

Khi được đưa vào trang, bạn có thể đặt cookie:

docCookies.setItem(name, value);

đọc một cái bánh quy

docCookies.getItem(name);

hoặc xóa cookie:

docCookies.removeItem(name);

Ví dụ:

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

Xem thêm ví dụ và chi tiết trên trang document.cookie của Mozilla .

Một phiên bản của tệp js đơn giản này có trên github .

ES7, sử dụng biểu thức chính quy cho get (). Dựa trên 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)

Cách sử dụng - Cookie.get (tên, giá trị [, tùy chọn]):
tùy chọn hỗ trợ tất cả các tùy chọn cookie tiêu chuẩn và thêm "ngày":

• đường dẫn : '/' - bất kỳ đường dẫn tuyệt đối. Mặc định : vị trí tài liệu hiện tại,
• tên miền : 'sub.example.com' - có thể không bắt đầu bằng dấu chấm. Mặc định : máy chủ hiện tại không có tên miền phụ.
• an toàn : đúng - Chỉ phục vụ cookie qua https. Mặc định : sai.
• ngày : 2 - ngày cho đến khi cookie hết hạn. Mặc định : Kết thúc phiên.
  Các cách khác để thiết lập hết hạn:
  • hết hạn : 'Chủ nhật, ngày 18 tháng 2 năm 2018 16:23:42 GMT' - ngày hết hạn dưới dạng chuỗi GMT.
    Ngày hiện tại có thể được nhận với: Ngày mới (Date.now ()). ToUTCString ()
  • 'Tuổi tối đa' : 30 - giống như ngày, nhưng tính bằng giây thay vì ngày.

Các câu trả lời khác sử dụng "hết hạn" thay vì "tối đa" để hỗ trợ các phiên bản IE cũ hơn. Phương pháp này yêu cầu ES7, vì vậy IE7 không có vấn đề gì (đây không phải là vấn đề lớn).

Lưu ý: Các ký tự vui như "=" và "{:}" được hỗ trợ dưới dạng giá trị cookie và regex xử lý khoảng trắng hàng đầu và dấu (từ các lib khác).
Nếu bạn muốn lưu trữ các đối tượng, hãy mã hóa chúng trước và sau bằng và JSON.opesify và JSON.parse, chỉnh sửa phần trên hoặc thêm phương thức khác. Ví dụ:

Cookie.getJSON = name => JSON.parse(Cookie.get(name))
Cookie.setJSON = (name, value, opts) => Cookie.set(name, JSON.stringify(value), opts);

Đối với những người cần lưu các đối tượng như {foo: 'bar'}, tôi chia sẻ phiên bản chỉnh sửa của câu trả lời @ KevinBurke. Tôi đã thêm JSON.opesify và JSON.parse, chỉ vậy thôi.

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

}

Vì vậy, bây giờ bạn có thể làm những việc như thế này:

cookie.set('cookie_key', {foo: 'bar'}, 30);

cookie.get('cookie_key'); // {foo: 'bar'}

cookie.set('cookie_key', 'baz', 30);

cookie.get('cookie_key'); // 'baz'

Tôi đã sử dụng câu trả lời được chấp nhận của chủ đề này nhiều lần rồi. Đó là một đoạn mã tuyệt vời: Đơn giản và có thể sử dụng được. Nhưng tôi thường sử dụng babel và ES6 và các mô-đun, vì vậy nếu bạn giống tôi, đây là mã để sao chép để phát triển nhanh hơn với ES6

Câu trả lời được chấp nhận viết lại dưới dạng mô-đun với 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 '';
};

Và sau này, bạn có thể chỉ cần nhập nó dưới dạng bất kỳ mô-đun nào (đường dẫn của khóa học có thể thay đổi):

import {createCookie, getCookie} from './../helpers/Cookie';

Đây là mã để Nhận, Đặt và Xóa Cookie trong 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);
}

Nguồn: http://mycodingtricks.com/snippets/javascript/javascript-cookies/

Tôi sử dụng đối tượng này. Các giá trị được mã hóa, vì vậy cần phải xem xét nó khi đọc hoặc viết từ phía máy chủ.

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

})();

Cách đơn giản để đọc cookie trong ES6.

function getCookies() {
    var cookies = {};
    for (let cookie of document.cookie.split('; ')) {
        let [name, value] = cookie.split("=");
        cookies[name] = decodeURIComponent(value);
    }
    console.dir(cookies);
}

Tôi đã sử dụng js-cookie để thành công.

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

Bạn có thể sử dụng mô-đun ES cookie của tôi để nhận / đặt / xóa cookie.

Sử dụng:

Trong thẻ đầu của bạn, bao gồm mã sau đây:

<script src="https://raw.githack.com/anhr/cookieNodeJS/master/build/cookie.js"></script>

hoặc là

<script src="https://raw.githack.com/anhr/cookieNodeJS/master/build/cookie.min.js"></script>

Bây giờ bạn có thể sử dụng window.cookie để lưu trữ thông tin người dùng trong các trang web.

cookie.isEnables ()

Là cookie được kích hoạt trong trình duyệt web của bạn?

returns {boolean} true if cookie enabled.

Thí dụ

if ( cookie.isEnabled() )
    console.log('cookie is enabled on your browser');
else
    console.error('cookie is disabled on your browser');

cookie.set (tên, giá trị)

Đặt một cookie.

name: cookie name.
value: cookie value.

Thí dụ

cookie.set('age', 25);

cookie.get (tên [, defaultValue]);

lấy một cái bánh quy

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 (tên);

Xóa cookie.

name: cookie name.

cookie.remove( 'age' );

Ví dụ về cách sử dụng

Một phiên bản cải tiến của 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;
}

Điều này sẽ phá vỡ ngay khi bạn tìm thấy giá trị cookie của mình và trả về giá trị của nó. Theo tôi rất thanh lịch với sự chia đôi.

Thay thế trên điều kiện if là một khoảng trắng, để đảm bảo nó khớp chính xác

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

Tôi đã viết cookieUtils đơn giản, nó có ba chức năng để tạo cookie, đọc cookie và xóa 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;';
    }
};

Dưới đây là ví dụ từ w3chools đã được đề cập.

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

Một cách đọc đơn giản

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

Một cách đơn giản và đơn giản để đọc cookie có thể là một cái gì đó như:

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

Điều này có thể được sử dụng nếu bạn biết cookie của bạn có chứa một cái gì đó như : username="John Doe"; id=123;. Lưu ý rằng một chuỗi sẽ cần dấu ngoặc kép trong cookie. Không phải là cách được đề xuất có thể, nhưng hoạt động để thử nghiệm / học tập.