Cookie-uri în JavaScript: Setați, obțineți și ștergeți exemplu

Ce sunt Cookie-urile?

Un cookie este o porțiune de date stocată pe computerul dvs. pentru a fi accesată de browser. De asemenea, este posibil să fi beneficiat de avantajele cookie-urilor, în mod conștient sau neștiutor. Ați rămas vreodată conectat la un site precum Facebook, astfel încât să nu fie nevoie să introduceți datele dvs. de fiecare dată când încercați să vă conectați? Dacă da, atunci utilizați cookie-uri. Cookie-urile sunt salvate ca perechi cheie/valoare.

O clarificare importantă: un cookie nu vă păstrează parola. Acesta conține un identificator de sesiune, care este un token aleatoriu pe care serverul îl emite după o conectare reușită. Serverul potrivește acel token cu contul dvs., astfel încât parola în sine nu părăsește niciodată serverul.

De ce ai nevoie de un cookie?

Comunicarea dintre a browser web și serverul se întâmplă folosind un protocol fără stare numit HTTP. Un protocol fără stare tratează fiecare solicitare independent. Prin urmare, serverul nu păstrează datele după ce le trimite către browser. Dar, în multe situații, datele vor fi necesare din nou. Aici intervin cookie-urile. Cu cookie-urile, browserul web nu va trebui să comunice cu serverul de fiecare dată când sunt necesare date. În schimb, acestea pot fi preluate direct de pe computer.

Utilizările tipice includ memorarea unei sesiuni de conectare, stocarea unei preferințe de limbă sau temă, păstrarea...ping articole dintr-un magazinping coș de cumpărături între pagini și numărarea vizitatorilor care vizitează pentru prima dată față de cei care revin.

Javascript Setați Cookie

Puteți crea cookie-uri folosind proprietatea document.cookie astfel.

document.cookie = "cookiename=cookievalue"

Puteți chiar adăuga o dată de expirare la cookie-ul dvs., astfel încât cookie-ul respectiv să fie eliminat de pe computer la data specificată. Data de expirare trebuie setată în formatul UTC/GMT. Dacă nu setați data de expirare, cookie-ul va fi eliminat atunci când utilizatorul închide browserul.

document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2031 20:00:00 UTC"

De asemenea, puteți seta domeniul și calea pentru a specifica domeniului și directoarelor din domeniul specific cărora îi aparține cookie-ul. În mod implicit, un cookie aparține paginii care setează cookie-ul.

document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2031 20:00:00 UTC; path=/ "

//creează un cookie cu domeniul paginii curente și o cale care acoperă întregul domeniu.

JavaScript Obține cookie

Puteți accesa cookie-ul astfel, care va returna toate cookie-urile salvate pentru domeniul curent.

var x =  document.cookie

Valoarea returnată este un singur șir de caractere de forma name1=value1; name2=value2Nu există o metodă încorporată pentru a citi un cookie după nume, așa că șirul trebuie divizat. Instrumentul auxiliar de mai jos returnează o singură valoare și un șir gol atunci când numele lipsește.

function getCookie(name) {
    const pairs = document.cookie.split(";");
    for (let i = 0; i < pairs.length; i++) {
        const pair = pairs[i].trim();
        if (pair.indexOf(name + "=") === 0) {
            // decode in case the value contained spaces or symbols
            return decodeURIComponent(pair.substring(name.length + 1));
        }
    }
    return "";
}

document.cookie = "username=Ann Smith; path=/";
console.log(getCookie("username"));
console.log(getCookie("missing") === "");

ieșire:

Ann Smith
true

JavaScript Ștergere cookie

Pentru a șterge un cookie, trebuie doar să setați valoarea cookie-ului la empty și să setați valoarea expires la o dată care a trecut deja.

document.cookie = "cookiename= ; expires = Thu, 01 Jan 1970 00:00:00 GMT"

Un detaliu cauzează majoritatea ștergerilor eșuate. Browserul identifică un cookie după numele său, împreună cu calea și domeniul său, astfel încât instrucțiunea de ștergere trebuie să repete aceeași cale și același domeniu care au fost utilizate la crearea cookie-ului.

// created with an explicit path
document.cookie = "theme=dark; path=/; max-age=2592000";

// deletion must repeat that same path
document.cookie = "theme=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";

// max-age=0 achieves the same result in one shorter line
document.cookie = "theme=; path=/; max-age=0";

Atributele cookie-urilor explicate

Fiecare atribut de după primul punct și virgulă modifică durata de viață a cookie-ului, ce solicitări îl transportă și ce cod îl poate citi. Referința de mai jos le acoperă pe toate.

SameSite merită o atenție deosebită deoarece browserele aplică acum o valoare implicită. Cele trei valori acceptate se comportă după cum urmează.

• Strict: Cookie-ul nu este niciodată trimis atunci când solicitarea provine de pe un alt site, aceasta fiind cea mai sigură setare pentru sesiunile bancare.
• Lax: Cookie-ul se deplasează odată cu navigarea de nivel superior, cum ar fi clicul pe un link, dar nu și cu imagini sau cadre pe mai multe site-uri. Aceasta este setarea implicită a browserului modern.
• Nici unul: Cookie-ul este trimis la fiecare solicitare cross-site și trebuie asociat cu atributul Secure, altfel browserul îl respinge.

// a well configured cookie set from client side script
document.cookie = "language=en; path=/; max-age=31536000; SameSite=Lax; Secure";

Încercați singur acest exemplu

Scriptul de mai jos combină toate cele trei operații. Creează un cookie cu o expirare măsurată în zile, îl citește după nume și salută un vizitator care revine. Instrucțiuni speciale pentru ca codul să funcționeze… Apăsați butonul de rulare de două ori.

<html>
<head>
	<title>Cookie!!!</title>
	<script type="text/javascript">
		function createCookie(cookieName,cookieValue,daysToExpire)
        {
          var date = new Date();
          date.setTime(date.getTime()+(daysToExpire*24*60*60*1000));
          document.cookie = cookieName + "=" + cookieValue + "; expires=" + date.toGMTString();
        }
		function accessCookie(cookieName)
        {
          var name = cookieName + "=";
          var allCookieArray = document.cookie.split(';');
          for(var i=0; i<allCookieArray.length; i++)
          {
            var temp = allCookieArray[i].trim();
            if (temp.indexOf(name)==0)
            return temp.substring(name.length,temp.length);
       	  }
        	return "";
        }
		function checkCookie()
        {
          var user = accessCookie("testCookie");
          if (user!="")
        	alert("Welcome Back " + user + "!!!");
          else
          {
            user = prompt("Please enter your name");
            num = prompt("How many days you want to store your name on your computer?");
            if (user!="" && user!=null)
            {
            createCookie("testCookie", user, num);
            }
          }
        }
	</script>
</head>
<body onload="checkCookie()"></body>
</html>

Comportament așteptat:

First run  : "Please enter your name"  -> Ann
             "How many days you want to store your name on your computer?" -> 5
Second run : alert box shows  Welcome Back Ann!!!

Code explicaţie: Funcția createCookie convertește un număr de zile în milisecunde și le adaugă la ora curentă, ceea ce produce data de expirare. Funcția accessCookie împarte șirul de caractere al cookie-ului prin punct și virgulă, elimină fiecare fragment și compară începutul fragmentului cu numele solicitat. Funcția checkCookie le leagă pe cele două la încărcarea paginii.

Cookie-uri vs. stocare locală vs. stocare de sesiune

Cookie-urile nu sunt singurul loc în care un browser poate stoca date. Există două opțiuni de stocare web, iar alegerea corectă evită trimiterea de octeți inutili la fiecare solicitare.

Regula practică este simplă. Dacă serverul are nevoie de valoare, folosește un cookie. Dacă doar pagina are nevoie de ea, folosește localStorage sau sessionStorage, deoarece aceste valori nu adaugă niciodată greutate unei solicitări de rețea.

Codul de gestionare a cookie-urilor este de obicei partajat pe mai multe pagini, așa că verificați intern si extern JavaScenariu înainte de a decide unde să o plaseze. Împărțirea șirurilor folosită aici se bazează pe JavaȘiruri de script și JavaMetode de tip matrice de script, iar alte scripturi de lucru apar în practic JavaExemple de cod de script.

Întrebări frecvente