मैं कुकी से मूल्य कैसे बनाऊं और पढ़ूं?


274

मैं जावास्क्रिप्ट में कुकी से मूल्य कैसे बना सकता हूं और पढ़ सकता हूं?



FWIW, js-कुकी इसे संभालने के लिए एक बहुत अच्छा एपीआई प्रदान करता है।
फागनर ब्रैक

आप इस गाइड को जावास्क्रिप्ट कुकी पर देख सकते हैं ।
शुभम कुमार

मत भूलो कि वेब स्टोरेज एपीआई , कुछ स्थितियों में कुकीज़ का एक अच्छा विकल्प हो सकता है।
मैटबिएंको

जवाबों:


234

यहां वे कार्य हैं जिन्हें आप कुकीज़ बनाने और पुनः प्राप्त करने के लिए उपयोग कर सकते हैं।

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

23
यह काम नहीं करता है यदि आपके कुकी मूल्य में कुछ भी शामिल है जो अच्छी तरह से एनकोड / डीकोड नहीं करता है। W3schools में से एक सुंदर ढंग से काम करता है
रिचर्ड राउत

13
मोज़िला के इस साधारण रैपर में स्पष्ट यूनिकोड समर्थन के साथ
ब्रैड पार्क्स

4
@BradParks GPL पर जारी किया गया है।
जाहू 22

1
यदि कुकी का कोई मान नहीं है, तो यह IE8 या 9 पर काम नहीं करेगा, क्योंकि कुकी नाम के बाद IE समान चिह्न ( = ) नहीं जोड़ता है । क्या हम करते हैं, तो जाँच करने के लिए है 1 - indexOf ( "=") == , और यदि हां पूरे कुकी कुकी नाम के रूप में इस्तेमाल करते हैं।
मोहोच

@ जाहू और मैं कहूंगा कि यह पब्लिक डोमेन में भी है: developer.mozilla.org/en-US/docs/MDN/…
क्रोनियल

51

न्यूनतम और पूर्ण विशेषताओं वाला 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)
}

2
toGMTString()पदावनत किया जाता है, toUTCString()इसके बजाय उपयोग करें ।
थान गुयेन

@NguyenThanh Thx! अपडेट किया गया
आर्टिकप्रो

1
कभी-कभी कुकी के मूल्य में स्वयं का =चिह्न हो सकता है । उस स्थिति में फ़ंक्शन getCookieअप्रत्याशित परिणाम देगा। इससे बचने के लिए निम्नलिखित कम करने के लिए एरो फंक्शन बॉडी का उपयोग करने पर विचार करेंconst [n, ...val] = v.split('='); return n === name ? decodeURIComponent(val.join('=')) : r
दिमित्री ज़ुरा

हालांकि एक्सपायरी डेट को परेशान करने का विकल्प छोड़ना अच्छा होगा। इससे कुकी को ब्राउज़र से बाहर निकलने पर स्वचालित रूप से हटा दिया जाएगा।
xji

4
864e5 = 86400000 = 1000*60*60*24एक 24 घंटे में मिलीसेकंड की संख्या का प्रतिनिधित्व करता है।
हेनरिख कैंतुनी

41

JQuery के कुकीज़

या सादे जावास्क्रिप्ट:

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

1
मैं इसे मुख्य रूप से चिह्नित कर रहा हूं क्योंकि आपने JQuery कुकीज़ का उल्लेख किया था। मैं यही सलाह दूंगा। कोड बहुत छोटा है और यदि आप पहले से ही JQuery का उपयोग कर रहे हैं, तो उपयोग करना सही है।
w0rp

17

मोज़िला इसे कैसे उपयोग करने के उदाहरणों के साथ पूर्ण यूनिकोड समर्थन के साथ कुकीज़ पढ़ने और लिखने के लिए एक सरल ढांचा प्रदान करता है ।

पृष्ठ पर शामिल होने के बाद, आप कुकी सेट कर सकते हैं:

docCookies.setItem(name, value);

कुकी पढ़ें:

docCookies.getItem(name);

या कुकी को हटा दें:

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

मोजिला के डॉक्यूमेंट.कोकी पेज पर अधिक उदाहरण और विवरण देखें ।

इस सरल js फ़ाइल का एक संस्करण जीथब पर है


2
कृपया ध्यान दें कि एमडीएन पर दी गई कुकी लाइब्रेरी को जीपीएल के तहत जारी किया गया है, न कि एलजीपीएल के तहत।
सभी कार्यकर्ता

मुझे कौन सी जावास्क्रिप्ट फ़ाइल आयात करने की आवश्यकता है? यह नहीं मिल सका :(
AlikElzin-kilaka

इस पृष्ठ पर "लाइब्रेरी" के अंतर्गत अनुभाग देखें: developer.mozilla.org/en-US/docs/Web/API/document/… - आप इसे एक फ़ाइल में सहेज सकते हैं और इसमें शामिल कर सकते हैं या इसे एक मौजूदा js फ़ाइल में पेस्ट कर सकते हैं जहाँ आप इसका उपयोग करना चाहेंगे।
ब्रेंडन नी

तो कोई स्टैंडअलोन जावास्क्रिप्ट फ़ाइल नहीं? तो यह एक कोड स्निपेट है - वास्तविक पुस्तकालय नहीं।
एलिकएल्ज़िन-किलाका

महान इनपुट! "पुस्तकालय" ~ 80 लाइनों के साथ एक .js फ़ाइल है; यह फ़ाइल (GitHub पर) है: github.com/madmurphy/cookies.js/blob/master/cookies.js
फिलिप

8

ES7, पाने के लिए एक regex का उपयोग कर ()। एमडीएन के आधार पर

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)

उपयोग - Cook.get (नाम, मान [, विकल्प]):
विकल्प सभी मानक कुकी विकल्पों का समर्थन करता है और "दिन" जोड़ता है:

  • पथ : '/' - कोई भी पूर्ण पथ। डिफ़ॉल्ट : वर्तमान दस्तावेज़ स्थान,
  • डोमेन : 'sub.example.com' - डॉट से शुरू नहीं हो सकता है। डिफ़ॉल्ट : उप-डोमेन के बिना वर्तमान होस्ट।
  • सुरक्षित : सच - केवल https पर कुकी की सेवा। डिफ़ॉल्ट : गलत।
  • दिन : 2 - कुकी समाप्त होने तक दिन। डिफ़ॉल्ट : सत्र का अंत।
    समाप्ति की स्थापना के वैकल्पिक तरीके:
    • एक्सपायर : 'सन, 18 फरवरी 2018 16:23:42 GMT' - जीएमटी स्ट्रिंग के रूप में समाप्ति की तारीख।
      वर्तमान तिथि के साथ प्राप्त किया जा सकता है: नई तिथि (Date.now ())। ToUTCString ()
    • 'अधिकतम आयु' : 30 - दिनों के समान, लेकिन दिनों के बजाय सेकंड में।

अन्य उत्तर पुराने IE संस्करणों का समर्थन करने के लिए "अधिकतम-आयु" के बजाय "एक्सपायर" का उपयोग करते हैं। इस पद्धति के लिए ES7 की आवश्यकता होती है, इसलिए IE7 वैसे भी बाहर है (यह कोई बड़ी बात नहीं है)।

नोट: मजेदार वर्ण जैसे "=" और "{:}" को कुकी मानों के रूप में समर्थित किया गया है, और रेगेक्स व्हाट्सएप (अन्य कामों से) अग्रणी और अनुगामी संभालता है।
यदि आप ऑब्जेक्ट्स को स्टोर करना चाहते हैं, तो या तो 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
1. छोटा, और IMO को बनाए रखना आसान है। 2. अधिक पूर्ण (सुरक्षित, तर्क के किसी भी क्रम को स्वीकार करने का एकमात्र उत्तर है, अधिकतम आयु)। 3. अधिक मानक डिफॉल्ट (पथ आदि मानक के डिफॉल्ट्स, यहां अधिकांश उत्तरों के विपरीत)। 4. सर्वोत्तम अभ्यास (एमडीएन के अनुसार, रेगेक्स मूल्यों को निकालने का सबसे विश्वसनीय तरीका है)। 5. Futureprook (यदि कुकीज़ में अधिक विकल्प जोड़े जाते हैं, तो उन्हें बनाए रखा जाएगा)। 6. एक वस्तु कार्यों के एक समूह से कम कोड को प्रदूषित करती है। 7. प्राप्त करें, सेट करें और हटाएं और अधिक विधियों को जोड़ना आसान है। 8. ईएस 7 (स्वादिष्ट बूब्स)।
सैमगुडी

7

उन लोगों के लिए जिन्हें {foo: 'bar'} जैसी ऑब्जेक्ट्स को सहेजने की आवश्यकता है, मैं @ केविनबर्क के उत्तर के मेरे संपादित संस्करण को साझा करता हूं। मैंने 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'

5

मैंने कई बार पहले ही इस धागे के स्वीकृत उत्तर का उपयोग किया है। यह कोड का एक बड़ा टुकड़ा है: सरल और प्रयोग करने योग्य। लेकिन मैं आमतौर पर बैबल और ईएस 6 और मॉड्यूल का उपयोग करता हूं , इसलिए यदि आप मेरी तरह हैं, तो ईएस 6 के साथ तेजी से विकास के लिए कॉपी करने के लिए कोड है

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

5

यहां जावास्क्रिप्ट में Get, Set and Delete कुकी का कोड दिया गया है

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/


2

मैं इस वस्तु का उपयोग करता हूं। मान एन्कोडेड हैं, इसलिए सर्वर साइड से पढ़ते या लिखते समय इस पर विचार करना आवश्यक है।

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

})();

0

ईएस 6 में कुकीज़ को पढ़ने का सरल तरीका।

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

0

मैंने सफलता के लिए js-कुकी का उपयोग किया है ।

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

0

आप कुकी प्राप्त / सेट / निकालने के लिए मेरे कुकी ES मॉड्यूल का उपयोग कर सकते हैं ।

उपयोग:

अपने हेड टैग में, निम्नलिखित कोड शामिल करें:

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

क्या कुकी आपके वेब ब्राउज़र में सक्षम है?

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

कुकी.सेट (नाम, मान)

कुकी सेट करें।

name: cookie name.
value: cookie value.

उदाहरण

cookie.set('age', 25);

कुकी.गेट (नाम [, 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);

कुकी.कर्म (नाम);

कुकी को हटा दें।

name: cookie name.
उदाहरण
cookie.remove( 'age' );

उपयोग का उदाहरण


-1

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

जैसे ही आपको अपना कुकी मूल्य मिल जाए और उसका मान वापस करना चाहिए। मेरी राय में डबल स्प्लिट के साथ बहुत सुरुचिपूर्ण।

यह सुनिश्चित करने के लिए कि क्या यह सही ढंग से मेल खाता है, इफ-कंडीशन की जगह एक सफेद स्पेस ट्रिम है


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

-1

मैंने सरल कुकीटाइटल लिखा है, इसमें कुकी बनाने, कुकी को पढ़ने और कुकी को हटाने के तीन कार्य हैं।

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

-1

यहाँ 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 "";
}

-1

एक साधारण पढ़ा

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

-2

कुकी को पढ़ने का एक चुटीला और सरल तरीका कुछ इस तरह हो सकता है:

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

यह अगर आप जानते हैं अपने कुकी की तरह कुछ में शामिल किया जा सकता है: username="John Doe"; id=123;। ध्यान दें कि एक स्ट्रिंग को कुकी में उद्धरण की आवश्यकता होगी। अनुशंसित तरीका शायद नहीं, लेकिन परीक्षण / सीखने के लिए काम करता है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.