Stocarea Datelor

Cookie-uri

Una dintre opțiunile pentru salvarea datelor în browser este utilizarea cookie-urilor. Astfel, de fiecare dată când accesăm o pagină web pe internet, serverul web, împreună cu acea pagină, trimite cookie-urile asociate (dacă există). Browserul stochează aceste date pentru o anumită perioadă. La accesările ulterioare ale aceleiași pagini sau site, în funcție de setările cookie-urilor, acestea sunt trimise înapoi de la browser la server.

Pentru lucrul cu cookie-urile în limbajul JavaScript, obiectul document dispune de proprietatea cookie.

Pentru a seta un cookie, este suficient să atribuim proprietății document.cookie un șir cu cookie-urile:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
<script>
document.cookie = "login=tom32;";
console.log(document.cookie);
</script>
</body>
</html>

În acest caz, se setează un cookie numit "login" care are valoarea "tom32". Apoi obținem cookie-ul și îl afișăm în consolă.

Este de menționat că lucrul cu cookie-urile poate varia în funcție de browserul utilizat și de modul în care este lansată pagina web: ca fișier local sau ca fișier pe serverul web. De exemplu, dacă lansăm pagina web ca fișier local, adică doar tragem pagina web definită mai sus în browserul Mozilla Firefox sau Safari, atunci browserul va seta cookie-ul și îl va afișa în consolă. Browserele suportă vizualizarea cookie-urilor setate (precum și a altor date salvate). De exemplu, în Mozilla Firefox, în instrumentele pentru dezvoltatori există filele "Storage" și acolo se pot vedea cookie-urile:

Cu toate acestea, în alte browsere, cum ar fi Google Chrome sau Opera, există restricții pentru setarea cookie-urilor pe paginile web care reprezintă fișiere locale. Astfel, dacă tragem pagina definită mai sus în Google Chrome, consola nu va afișa nimic. Deoarece Google Chrome permite setarea cookie-urilor doar pe paginile web care sunt încărcate de pe un server web și aparțin unui anumit domeniu în rețea. Ceea ce nu este surprinzător. Deoarece cookie-urile sunt destinate în primul rând pentru transmiterea datelor prin protocolul http de la client la server și înapoi.

Prin urmare, în continuare, pentru lucrul cu cookie-urile, vom plasa paginile HTML pe serverul web. În acest caz, vom folosi cea mai simplă opțiune - Node.js, deoarece această tehnologie este destul de simplă, disponibilă pentru toate sistemele de operare principale și permite de asemenea utilizarea JavaScript pentru crearea aplicațiilor.

Dar, desigur, înainte de a crea aplicația este necesar să instalăm Node.js. În acest caz, nu va fi necesară nicio cunoaștere a Node.js, tot codul utilizat este descris în detaliu. Dar, din nou, în loc de Node.js, poate fi orice altă tehnologie de server - php, asp.net, python etc., sau un anumit server web cum ar fi Apache sau IIS.

Așadar, vom crea în sistemul de fișiere un folder pentru fișierele serverului web. De exemplu, în cazul meu, acesta este folderul C:\app. Apoi, în acest folder, definim fișierul serverului. Să presupunem că se numește server.js și are următorul cod:

const http = require("http");
const fs = require("fs");
   
http.createServer(function(_, response){
     
   fs.readFile("index.html", (_, data) => response.end(data));

}).listen(3000, ()=>console.log("Serverul a fost lansat la adresa http://localhost:3000"));

Acesta este cel mai primitiv server, care este suficient pentru sarcina noastră. Să trecem în revistă codul pe scurt. La început, se conectează pachetele cu funcționalitatea pe care intenționăm să o utilizăm:

const http = require("http");   // pentru procesarea cererilor primite
const fs = require("fs");       // pentru citirea din hard disk a fișierului index.html

Pentru crearea serverului se folosește funcția http.createServer(). În această funcție se transmite un handler, care este apelat de fiecare dată când serverul primește o cerere. Această funcție are doi parametri: request (conține datele cererii) și response (gestionează trimiterea răspunsului). Primul parametru nu este utilizat, de aceea în locul său este indicat un underscore _.

În funcția handler trimitem fișierul index.html, pe care îl vom defini mai târziu:

fs.readFile("index.html", (error, data) => response.end(data));

Pentru citirea fișierelor se folosește funcția încorporată fs.readFile(). Primul parametru al funcției este adresa fișierului (în acest caz se presupune că fișierul index.html se află în același folder cu fișierul server.js). Al doilea parametru este o funcție care este apelată după citirea fișierului și primește conținutul său prin al doilea parametru data. Apoi, conținutul citit poate fi trimis de asemenea cu ajutorul funcției response.end(data).

La sfârșit, cu funcția listen() lansăm serverul web pe portul 3000. Adică serverul va fi lansat la adresa http://localhost:3000/

Și, de asemenea, în același director vom defini fișierul index.html cu următorul cod:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
<script>
document.cookie = "login=tom32;";
console.log(document.cookie);
</script>
</body>
</html>

Aici, după cum a fost examinat anterior, se setează cookie-ul pentru login. Apoi, cookie-ul este afișat în consolă.

Acum, în consolă, vom naviga la directorul serverului folosind comanda cd și vom lansa serverul folosind comanda node server.js:

C:\app>node server.js
Serverul a fost lansat la adresa http://localhost:3000

După lansarea serverului, putem naviga în browser la adresa http://localhost:3000, unde ne va fi afișată pagina index.html. Folosind uneltele browserului, putem vizualiza cookie-urile setate. De exemplu, în Google Chrome, acest lucru se face din tab-ul Application, și în partea stângă, Storage -> Cookies:

Setarea parametrilor cookie-ului

Șirul cookie acceptă până la șase parametri diferiți:

Numele și valoarea cookie-ului

Numele nu este sensibil la majuscule, ceea ce înseamnă că, de exemplu, login și Login se referă la același cookie. Ca valori sunt permise doar șiruri (nu, de exemplu, numere). Numele și valoarea sunt singurele componente obligatorii. Nu este obligatoriu să specificați restul informațiilor (dacă nu sunt specificate, se folosesc valorile implicite).

Perioada de expirare (parametrul expires)

Data de expirare până la care cookie-ul este valid. După data specificată aici, cookie-ul expiră, este șters și nu mai este trimis la server. Dacă la crearea cookie-ului nu este specificată o dată de expirare, acesta este șters implicit la închiderea sesiunii browserului.

Calea (parametrul path) și domeniul (parametrul domain)

Sunt folosite pentru a delimita cookie-urile. De exemplu, un cookie cu domeniul www.localhost.com este trimis doar cu cererile către acest domeniu. Un cookie cu domeniul www.localhost.com și calea /home este trimis doar cu cererile către www.localhost.com/home, dar nu și către www.localhost.com/about.

Parametrul secure

Un indicator de securitate care poate fi folosit pentru a specifica dacă cookie-urile ar trebui trimise doar prin conexiuni care folosesc protocolul Secure Sockets Layer (SSL), de exemplu, pentru a permite trimiterea prin https. Dacă acest parametru este setat, cookie-ul poate fi trimis la adresa https://www.localhost.com, dar la cererile către adresa http://www.localhost.com, acest cookie NU este trimis.

Mai sus, au fost folosiți doar doi parametri: numele și valoarea cookie-ului:

document.cookie = "login=tom32;";

Adică, în acest caz, cookie-ul are numele login și valoarea tom32.

Parametrul expires

Dar un astfel de cookie are un termen de viață foarte limitat: dacă nu se setează explicit un termen de expirare, cookie-ul va fi șters odată cu închiderea browserului. O astfel de situație poate fi ideală pentru cazurile în care este necesar să se șteargă toate informațiile după finalizarea lucrului cu aplicația web și închiderea browserului. Totuși, acest comportament nu este întotdeauna potrivit.

Și în acest caz, trebuie să setăm parametrul expires, adică perioada de valabilitate a cookie-urilor:

document.cookie = "login=tom32;expires=Sun, 31 Dec 2023 23:59:00 GMT;";

Adică, perioada de valabilitate a cookie-ului login expiră luni, 31 decembrie 2023, la 23:59. Formatul parametrului expires este foarte important. Totuși, acesta poate fi generat programatic. În acest scop, putem folosi metoda toUTCString() a obiectului Date:

const expire = new Date();
expire.setHours(expire.getHours() + 4);
document.cookie = "login=tom32;expires=" + expire.toUTCString() + ";";

În acest caz, termenul de valabilitate al cookie-ului va fi de 4 ore.

Calea și domeniul

Dacă dorim să setăm cookie-uri pentru o anumită cale pe site, putem folosi parametrul path. De exemplu, dorim să setăm cookie-uri doar pentru calea http://localhost:3000/home:

document.cookie = "login=tom32;expires=Sun, 31 Dec 2023 23:59:00 GMT;path=/home;";

În acest caz, pentru alte căi de pe site, de exemplu, http://localhost:3000/about, aceste cookie-uri nu vor fi accesibile. Totuși, trebuie să reținem că acest cookie va fi setat dacă accesăm calea http://localhost:3000/home.

Dacă site-ul nostru are mai multe domenii și dorim să setăm cookie-uri direct pentru un anumit domeniu, atunci putem folosi parametrul domain. De exemplu, pe site-ul nostru există subdomeniul blog.mysite.com:

document.cookie = "login=tom32;expires=Sun, 31 Dec 2023 23:59:00 GMT;path=/;domain=blog.mysite.com;";

Parametrul path=/ indică faptul că cookie-ul va fi accesibil pentru toate directoarele și căile subdomeniului blog.mysite.com.

Parametrul secure

Ultimul parametru, secure, stabilește utilizarea SSL (Secure Sockets Layer) și este adecvat pentru site-uri care folosesc protocolul https. Dacă valoarea acestui parametru este true, cookie-urile vor fi utilizate doar în cazul stabilirii unei conexiuni securizate ssl. În mod implicit, acest parametru este setat pe false.

document.cookie = "login=tom32;expires=Sun, 31 Dec 2023 23:59:00 GMT;path=/;secure=true;";

Obținerea cookie-urilor

Pentru a extrage în mod simplu cookie-urile din browser, este suficient să accesăm proprietatea document.cookie:

const expire = new Date();
expire.setHours(expire.getHours() + 4);

document.cookie = "language=JavaScript;expires=" + expire.toUTCString() + ";";
document.cookie = "company=Localhost;expires=" + expire.toUTCString() + ";";
document.cookie = "login=tom32;";

console.log(document.cookie);

Aici au fost setate trei cookie-uri, iar consola browserului ne va afișa toate aceste cookie-uri:

language=JavaScript; company=Localhost; login=tom32

Cookie-urile extrase nu includ parametrii expires, path, domain și secure. De asemenea, cookie-urile sunt separate prin punct și virgulă, așadar este necesar să efectuăm unele transformări pentru a obține numele și valoarea acestora:

const cookies = document.cookie.split(";");
for(cookie of cookies){

   const parts = cookie.split("=");
   console.log("Numele cookie-ului:", parts[0]);
   console.log("Valoarea:", parts[1], "\n\n");
}

Restricții ale cookie-urilor

Toate fișierele cookie pentru domeniul și calea corespunzătoare sunt trimise cu fiecare cerere, ceea ce afectează volumul datelor transmise. În plus, cookie-urile trimise prin protocolul HTTP (și nu prin protocolul securizat HTTPS) sunt transmise în formă necriptată, ceea ce reprezintă un risc de securitate în funcție de tipul de informații transmise. Un alt aspect limitativ al cookie-urilor este dimensiunea maximă permisă a memoriei, care este de 4 KB.