localStorage vs sessionStorage vs Cookies – o comparație detaliată

Cookie-urile sunt cu noi de mult timp (Internet Explorer v2 avea suport pentru ele în octombrie 1995). Nu este nimic în neregulă cu ei și cu siguranță au făcut web-ul un loc mai plăcut, dar după aproape 25 de ani s-au schimbat multe.

Stocarea locală (o veți găsi sub Stocare web pe W3) este și nu este un înlocuitor pentru cookie-uri. Asta este cel mai confuz la asta. În cele mai multe cazuri, puteți utiliza în siguranță localStorage în loc de cookie-uri și puteți obține impresia (greșită) că sunt la fel, în timp ce nu sunt. Citiți mai departe pentru a vedea o detaliere simplă despre cum și când să utilizați localStorage pentru a înlocui cookie-urile.

Revoluție sau evoluție?

Stocarea locală, sau stocarea locală, sau stocarea DOM sau stocarea web (nu inventez aceste nume; toate sunt în uz și toate se referă la același lucru) au fost adoptate în lumea reală printre browserele populare în 2012 ca „HTML5 caracteristică". Mi s-a părut un înlocuitor pentru biscuiți. O remediere pentru solicitările umflate care transportă date inutile tot timpul și limitările de dimensiune. Deși „rezolvă” aceste probleme, nu este un înlocuitor de mere pentru mere pentru cookie-uri.

Și în timp ce suntem pe tema datelor care nu sunt necesare. Știați că cererile nu sunt singurul lucru care poate avea o umflare inutilă, site-ul dvs. poate de asemenea. Din fericire, există o soluție și se numește WP Reset.

WP Reset este un plugin care vine cu o serie de opțiuni de resetare care vă vor permite să faceți lucruri precum eliminarea datelor acumulate și/sau suplimente (pluginuri, teme, utilizatori, widget-uri, conținut etc.) de pe site-ul dvs. și chiar ștergerea întregului site. Uimitor, nu? Dar asta nu este tot. Printre alte caracteristici, acest plugin poate crea instantanee de baze de date, precum și colecții de pluginuri și teme pe care le puteți instala cu un clic de câte ori este nevoie. Cu siguranță un instrument care merită verificat.

Dar, acum, să revenim la a vorbi despre LocalStorage.

După cum sugerează și numele, datele sunt stocate local, pe dispozitivul utilizatorului. Prin urmare, nu trebuie să fie transferat prin rețea cu fiecare solicitare HTTP reducând amprenta și oferindu-ne mult mai mult spațiu pentru a salva datele. Acea paradigmă „numai local” este cea mai semnificativă diferență între cookie-uri și stocarea locală. Cookie-urile pot fi citite atât pe partea serverului, cât și pe partea clientului, stocarea locală numai pe partea clientului. Cam despre asta e. Dacă aplicația dvs. depinde în mare măsură de citirea cookie-urilor de pe server și de generarea de conținut pe baza acestuia, atunci trecerea la stocarea locală va însemna rescrierea aplicației. Dacă utilizați cookie-uri doar pentru a stoca setări, cum ar fi ce filă este activă în interfață, atunci stocarea locală este un înlocuitor ideal.

Înșelător de asemănător

Tabelul de mai jos oferă o perspectivă clară asupra diferențelor și cazurilor de utilizare ale cookie-urilor, localStorage și sessionStorage. În timp ce puteți arunca o privire rapidă la el pentru a obține răspunsul de care aveți nevoie și a pleca, vă recomand să citiți notele de subsol oarecum lungi care intră în mai multe detalii. Da, știu că ești ocupat și vrei să vezi următorul videoclip cu pisici, dar lucrurile nu sunt alb-negru, așa că să sapi puțin mai adânc îți va face bine.

Sapă mai adânc în stocarea web și cookie-uri

Cantitatea maximă de date pe care o puteți stoca local depinde de browser. Nu există garanții și dacă vrei un pariu sigur, coboară sub 5 MB, până la aproximativ 2 MB. Utilizați acest instrument la îndemână pentru a testa dimensiunea maximă de stocare locală permisă în browser.

Este un scenariu comun ca utilizatorii să blocheze cookie-urile terțe sau toate . Aceeași regulă se aplică stocării locale. Nu există garanții, iar aplicația dvs. trebuie să funcționeze (sau cel puțin să nu se întrerupă) într-un mediu în care stocarea locală nu este disponibilă.

Toate cookie-urile expiră la un moment dat, dar oamenii tind să seteze durata de viață la câțiva ani, ceea ce pare pentru totdeauna în timpul internetului. Pe de altă parte, stocarea locală nu expiră niciodată și este disponibilă până când aplicația sau utilizatorul o șterge. Spațiul de stocare al sesiunii este curățat atunci când fila sau fereastra se închid - fără excepții.

„Ce vrei să spui că doar șirurile pot fi salvate ? Salvez obiecte tot timpul!” JSON vă permite să salvați obiecte și alte tipuri de date sub forma unui șir. Conversia se face prin citire și scriere fără știrea dvs. Cu o bibliotecă de sunet pentru gestionarea cookie-urilor și stocarea locală, nu va trebui să vă gândiți la tipurile de date. Cu toate acestea, asta nu schimbă faptul că numai șirurile sunt acceptate nativ.

Nu există o singură funcție pe partea client pe care toate browserele să o accepte . Este un fapt trist, dar totuși un fapt. Puteți verifica anumite numere pe Can I Use, dar în ceea ce privește cookie-urile și stocarea locală, aș ignora toate browserele care nu le acceptă. Sunt marginale și sub 1%.

Nu puteți accesa localStorage numai prin procesare pe partea serverului. Ai nevoie și de JS. Când utilizatorul solicită o pagină și PHP pornește (sau orice limbă pe care o utilizați pe server) pentru a o genera, nu veți avea acces la date locale, sesiuni sau permanente. Odată ce pagina se încarcă și JS începe, puteți accesa datele locale și puteți face tot ce aveți nevoie - ajustați interfața cu utilizatorul sau utilizați AJAX pentru a trimite datele locale înapoi la server. Deci, da, puteți primi datele locale înapoi pe server, dar nu în același mod și în același moment ca și cu un cookie. În funcție de cerințele dvs., acest lucru poate fi un deal-breaker atunci când vine vorba de trecerea de la cookie-uri la stocarea locală, așa că vă rugăm să planificați din timp!

Cu stocarea locală, nu se transferă date între client și server (cu excepția cazului în care există cod care face asta în mod explicit). Este excelent pentru a reduce dimensiunea sarcinii utile. Cookie-urile, pe de altă parte, sunt transferate ca câmp de antet HTTP cu fiecare solicitare pe domeniul setat. Acesta nu poate fi schimbat sau dezactivat selectiv.

Utilizatorii „nu ar trebui” să acceseze datele locale și să le modifice direct (în afara aplicației), dar nimic nu îi împiedică să facă acest lucru. Există numeroase instrumente de depanare disponibile pentru editarea datelor stocate local. Deci, nu aveți încredere în datele locale și nu presupuneți că utilizatorul nu le-a atins. Să presupunem întotdeauna ce este mai rău.

Deși cookie-urile au un atribut „securizat” pe care îl puteți seta, acesta nu protejează cookie-ul în tranzit de la aplicație la browser. Deci este mai bine decât nimic, dar departe de a fi sigur. Stocarea locală, fiind o tehnologie doar pe partea clientului, nu știe sau nu-i pasă dacă utilizați HTTP sau HTTPS. Securitatea trebuie să vină din modul în care gestionați datele. Nu stocați date sensibile, cum ar fi numere de card de credit sau parole, în nicio formă de stocare locală! Vreodată!

Un pic de cod pentru a începe

Acest articol nu este menit să fie un tutorial de stocare web JavaScript, dar pentru a vă scuti de probleme, iată un exemplu Hello World cu stocare locală;

// store a value
localStorage.setItem( 'name', 'John' );

// retrieve a value
localStorage.getItem( 'name' );

// remove the value
localStorage.removeItem( 'name' );

// only string values can be stored so for objects, use JSON
var post = {
  title: 'Cookies are old',
  author: 'Gordan'
}
localStorage.setItem( 'post', JSON.stringify( post ) );

// and to retrieve
var post = JSON.parse( localStorage.getItem( 'post' ) );

Codul de mai sus funcționează și este cât se poate de simplu. Cu toate acestea, nu recomand să-l folosiți. Ca și în cazul cookie-urilor, nimeni nu folosește document.cookies pentru a interacționa cu ele. Există diferențe minore între browsere de luat în considerare și, deoarece stochează doar șiruri, trebuie să stringeți și să analizați cu JSON la fiecare citire și scriere. De aceea, folosim biblioteci mici pentru a ne ajuta să gestionăm cookie-uri precum js-cookie. Același lucru este valabil și pentru stocarea locală. Punerea unui mic strat de abstractizare între codul dvs. și API vă va ajuta pe termen lung. Recomand store.js. Există de ceva vreme, se ocupă de prostiile și de alternativele între browsere și chiar are pluginuri la îndemână care își extind funcțiile. Dacă sunteți interesat de o practică de codificare, creați-vă propria bibliotecă și convertiți-o într-un plugin jQuery.

Cookie-urile sunt proaste, nu? Avem nevoie de ceva nou!

Cookie-urile nu sunt rele. Și-au îndeplinit scopul de zeci de ani și vor continua să o facă, deoarece depozitarea locală nu este un înlocuitor de „mere pentru mere”. Cookie-urile prezintă totuși semne de îmbătrânire. În afară de asta, unele dintre deficiențele lor de design nu vor dispărea prea curând. Și anume „poluarea” fiecărei cereri de pe domeniu cu sarcină utilă cookie și dimensiune maximă mică a sarcinii utile.

Inadecvate și vechi sau nu, cookie-urile sunt aici pentru a rămâne, așa că nu credeți că stocarea locală va prelua complet în curând. Cu toate acestea, în unele cazuri de utilizare, stocarea locală este fără îndoială o alegere mai bună.

Dacă aveți (o mulțime) de date de stocat pe partea clientului, care sunt rareori transferate pe server și acele date nu conțin nimic sensibil – începeți să utilizați stocarea locală ! Tocmai pentru asta a fost creat. Veți crea o aplicație mai rapidă făcând toate solicitările HTTP de pe domeniu mai ușoare și veți obține acel sentiment cald și neclar de a folosi ceva nou.