कोणीय कुकीज़


84

मैं कोणीय कुकीज़ के लिए चारों ओर देख रहा हूँ, लेकिन मुझे पता नहीं चल पाया है कि कोणीय में कुकीज़ प्रबंधन कैसे लागू किया जाए। क्या कुकीज़ को प्रबंधित करने का कोई तरीका है (जैसे कि AngularJS में $ कुकी )?


7
Angular2 में कुकीज़ को संभालने के लिए कोई मूल पुस्तकालय / सेवा नहीं है। JWT / LocalStorage का उपयोग करने का पसंदीदा तरीका है। github.com/auth0/angular2-authentication-sample
stan

जवाबों:


77

मैंने अपने स्वयं के कार्यों का निर्माण किया:

@Component({
    selector: 'cookie-consent',
    template: cookieconsent_html,
    styles: [cookieconsent_css]
})
export class CookieConsent {
    private isConsented: boolean = false;

    constructor() {
        this.isConsented = this.getCookie(COOKIE_CONSENT) === '1';
    }

    private getCookie(name: string) {
        let ca: Array<string> = document.cookie.split(';');
        let caLen: number = ca.length;
        let cookieName = `${name}=`;
        let c: string;

        for (let i: number = 0; i < caLen; i += 1) {
            c = ca[i].replace(/^\s+/g, '');
            if (c.indexOf(cookieName) == 0) {
                return c.substring(cookieName.length, c.length);
            }
        }
        return '';
    }

    private deleteCookie(name) {
        this.setCookie(name, '', -1);
    }

    private setCookie(name: string, value: string, expireDays: number, path: string = '') {
        let d:Date = new Date();
        d.setTime(d.getTime() + expireDays * 24 * 60 * 60 * 1000);
        let expires:string = `expires=${d.toUTCString()}`;
        let cpath:string = path ? `; path=${path}` : '';
        document.cookie = `${name}=${value}; ${expires}${cpath}`;
    }

    private consent(isConsent: boolean, e: any) {
        if (!isConsent) {
            return this.isConsented;
        } else if (isConsent) {
            this.setCookie(COOKIE_CONSENT, '1', COOKIE_CONSENT_EXPIRE_DAYS);
            this.isConsented = true;
            e.preventDefault();
        }
    }
}

5
अगली बार इसे इंजेक्टेबल
बनाइए

17
हो सकता है कि आप इंजेक्टेबल फंक्शनलिटी के साथ अपना खुद का सॉल्यूशन पोस्ट कर सकें, जो दूसरों के लिए इसे इंजेक्टेबल होना बहुत अच्छा होगा :)
मिकेल

क्या इसके लिए एक घटक होना चाहिए? आप इसे एक इंजेक्शन योग्य सेवा क्यों नहीं बनाते हैं?
बेन बोजॉर्ग

हो सकता है, लेकिन इसमें सहमति बैनर दिखाने के लिए html और css भी है। यह एक सेवा की तुलना में एक घटक की तरह अधिक लगता है। आप एक सेवा भी कर सकते हैं, लेकिन एक और अधिक सार होना चाहिए :)
मिकेल

6
मैंने उपरोक्त उत्तर के आधार पर इंजेक्टेबल सर्विस बनाई है: gist.github.com/greatb/c791796c0eba0916e34c536ab65802f8
Bala

43

अद्यतन: कोणीय 2-कुकी अब पदावनत हो गई है। कृपया मेरे बजाय नेक्सक्स-कुकी का उपयोग करें।

पुराना उत्तर:

यहाँ कोणीय 2 -कुकी है जो कि मेरे द्वारा बनाई गई कोणीय 1 $cookiesसेवा (एक removeAll()विधि) का सटीक कार्यान्वयन है । यह उसी विधियों का उपयोग कर रहा है, जो केवल कोणीय 2 तर्क के साथ टाइपस्क्रिप्ट में लागू किया गया है।

आप इसे घटक providersसरणी में एक सेवा के रूप में इंजेक्ट कर सकते हैं :

import {CookieService} from 'angular2-cookie/core';

@Component({
    selector: 'my-very-cool-app',
    template: '<h1>My Angular2 App with Cookies</h1>',
    providers: [CookieService]
})

उसके बाद, इसे हमेशा की तरह कसूर में परिभाषित करें और उपयोग करना शुरू करें:

export class AppComponent { 
  constructor(private _cookieService:CookieService){}

  getCookie(key: string){
    return this._cookieService.get(key);
  }
}

आप इसे npm के माध्यम से प्राप्त कर सकते हैं:

npm install angular2-cookie --save

1
एनजी 2-कुकीज़ के साथ कौन सा अंतर है?
मिकेल

यह पर्दे के पीछे कोणीय 1 तर्क और विधियों का उपयोग कर रहा है। तो यह अधिक कोणीय तरीके से है। इसके अलावा इसमें $ कुकीज़ सेवा से सभी विधियां हैं, साथ ही सभी विधि को हटा दें। इसके अलावा यह वैश्विक और पैरामीटर विकल्प प्रदान करता है। और यह एक सेवा है।
s.alem

ngx-कुकी अब और भी अद्यतन नहीं लगती है।
जेपी

यह आखिरकार अपडेट हो गया। देव अन्य सामान के साथ व्यस्त था और वह थोड़ा आलसी भी है: D
s.alem

11

हाँ, यहाँ एक एनजी 2-कुकीज़ है

उपयोग:

import { Cookie } from 'ng2-cookies/ng2-cookies';

Cookie.setCookie('cookieName', 'cookieValue');
Cookie.setCookie('cookieName', 'cookieValue', 10 /*days from now*/);
Cookie.setCookie('cookieName', 'cookieValue', 10, '/myapp/', 'mydomain.com');

let myCookie = Cookie.getCookie('cookieName');

Cookie.deleteCookie('cookieName');

1
उनके एपीआई यहाँ बदल गए हैं डॉक्स: github.com/BCJTI/ng2-cookies/wiki/Minimum-running-example
etayluz

9

NGX कुकी सेवा का उपयोग करें

इस पैकेज को इनस्टॉल करें: npm install ngx-cookie-service --save

प्रदाता के रूप में अपने app.module.ts में कुकी सेवा जोड़ें:

import { CookieService } from 'ngx-cookie-service';
@NgModule({
  declarations: [ AppComponent ],
  imports: [ BrowserModule, ... ],
  providers: [ CookieService ],
  bootstrap: [ AppComponent ]
})

फिर अपने कंपोनेंट में कॉल करें:

import { CookieService } from 'ngx-cookie-service';

constructor( private cookieService: CookieService ) { }

ngOnInit(): void {
  this.cookieService.set( 'name', 'Test Cookie' ); // To Set Cookie
  this.cookieValue = this.cookieService.get('name'); // To Get Cookie
}

बस!


हाय दीपक, क्या आपने अभी तक इस सेवा के साथ काम किया है? क्योंकि मैं एक प्रश्न हूं और आशा करता हूं कि आप मेरी मदद कर सकते हैं।
मिस्टर जो

मैंने एनजीएक्स-सर्विस और कुकी सहमति दोनों को स्थापित किया है। मैं अब इसे ऑप्ट-इन तरीके से लागू करने के लिए कड़ी मेहनत कर रहा हूं। मैंने सभी कुकीज़ को हटाने की कोशिश की है अगर उपयोगकर्ता गिरावट कुकीज़ बटन को दबाता है, लेकिन वे किसी भी तरह फिर से सेट हो रहे हैं। तो क्या आप जानते हैं कि इसे सही तरीके से कैसे किया जाना चाहिए?
मिस्टर जो

इस बारे में मेरा सवाल है: stackoverflow.com/questions/61656421/…
श्री जो

ऐसा लगता है कि संस्करण 10.1.1त्रुटि पैदा करता है Uncaught TypeError: Object(...) is not a function2.1.0कोड काम करने के लिए मैं संस्करण का उपयोग करता हूं । चेक github.com/stevermeister/ngx-cookie-service/issues/103
मनु चड्ढा

5

मैं Miquels संस्करण को सेवा के रूप में इंजेक्ट करता हूं:

import { Injectable } from '@angular/core';

@Injectable()
export class CookiesService {

    isConsented = false;

    constructor() {}

    /**
     * delete cookie
     * @param name
     */
    public deleteCookie(name) {
        this.setCookie(name, '', -1);
    }

    /**
     * get cookie
     * @param {string} name
     * @returns {string}
     */
    public getCookie(name: string) {
        const ca: Array<string> = decodeURIComponent(document.cookie).split(';');
        const caLen: number = ca.length;
        const cookieName = `${name}=`;
        let c: string;

        for (let i  = 0; i < caLen; i += 1) {
            c = ca[i].replace(/^\s+/g, '');
            if (c.indexOf(cookieName) === 0) {
                return c.substring(cookieName.length, c.length);
            }
        }
        return '';
    }

    /**
     * set cookie
     * @param {string} name
     * @param {string} value
     * @param {number} expireDays
     * @param {string} path
     */
    public setCookie(name: string, value: string, expireDays: number, path: string = '') {
        const d: Date = new Date();
        d.setTime(d.getTime() + expireDays * 24 * 60 * 60 * 1000);
        const expires = `expires=${d.toUTCString()}`;
        const cpath = path ? `; path=${path}` : '';
        document.cookie = `${name}=${value}; ${expires}${cpath}; SameSite=Lax`;
    }

    /**
     * consent
     * @param {boolean} isConsent
     * @param e
     * @param {string} COOKIE
     * @param {string} EXPIRE_DAYS
     * @returns {boolean}
     */
    public consent(isConsent: boolean, e: any, COOKIE: string, EXPIRE_DAYS: number) {
        if (!isConsent) {
            return this.isConsented;
        } else if (isConsent) {
            this.setCookie(COOKIE, '1', EXPIRE_DAYS);
            this.isConsented = true;
            e.preventDefault();
        }
    }

}

HttpOnly और सुरक्षित झंडे कैसे सेट करें?
iniravpatel

2

डाटा को स्टोर करना भी फायदेमंद है sessionStorage

// Save data to sessionStorage
sessionStorage.setItem('key', 'value');

// Get saved data from sessionStorage
var data = sessionStorage.getItem('key');

// Remove saved data from sessionStorage
sessionStorage.removeItem('key');

// Remove all saved data from sessionStorage
sessionStorage.clear();

विवरण के लिए https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionperitory


0

एक कुकी पढ़ने के लिए, मैंने मिकेल संस्करण के बहुत कम संशोधन किए हैं जो मेरे लिए काम नहीं करता है:

getCookie(name: string) {
        let ca: Array<string> = document.cookie.split(';');
        let cookieName = name + "=";
        let c: string;

        for (let i: number = 0; i < ca.length; i += 1) {
            if (ca[i].indexOf(name, 0) > -1) {
                c = ca[i].substring(cookieName.length +1, ca[i].length);
                console.log("valore cookie: " + c);
                return c;
            }
        }
        return "";
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.