Основните неща на JavaScript.

Запазване на данни за по-късно: Ръководство за локално съхранение и съхранение на сесии в JavaScript

Научете за съхраняването на предпочитания за клиента...

Има определени сценарии, когато програмистът от предния край ще трябва да съхранява някои данни в браузъра. JavaScript предоставя два метода за съхраняване на данни от страна на клиента: локално съхранение и съхранение на сесии. Тези методи ви позволяват да запазите данните дори след като потребителят затвори браузъра или сесията приключи. В тази публикация в блога ще обсъдим разликите между локалното хранилище и хранилището на сесиите и как да ги използвате във вашия код.

Накрая ще научите и как е различно от съхранението на бисквитки. И кога да изберете локално/сесийно съхранение пред бисквитки.

Сценариите за съхраняване на данни могат да бъдат,
- Можете да съхранявате токени за потребителска сесия (jwt), така че потребителят да не се налага да влиза всеки път.
- Можете да съхранявате предпочитания като тъмен режим /light-mode, Езикови предпочитания (локализации), звук за известяване/без звук.
- Можете да съхранявате данни за списък за гледане и колички, в случай че потребителят не е влязъл и по-късно да актуализирате за потребителя, след като той влезе.

Важно нещо, което трябва да имате предвид тук, е никога да не съхранявате идентификационни данни за сигурност, пароли, лична информация и т.н. Това би било катастрофално.

Забележка. Тези методи localStorage и sessionStorage са налични за обект прозорец. Така че можете директно да ги използвате във вашия JavaScript код. Сега нека се заемем веднага с това.

Локално хранилище: -

Локалното съхранение ви позволява да съхранявате данни от страна на клиента във формат ключ-стойност, който ще се запази дори след като потребителят затвори браузъра. Данните, съхранявани в локалното хранилище, нямат срок на валидност, което означава, че ще останат съхранени, докато не бъдат изтрити ръчно.

За да съхранявате данни в локално хранилище, използвайте обекта localStorage и неговия setItem() метод
За да извлечете съхранените данни, използвайте метода getItem()
За да изтриете съхранените данни, използвайте метода removeItem()

localStorage.setItem("key", "value");
const value = localStorage.getItem("key");
localStorage.removeItem("key");

Вижте този пример, за да разберете по-добре.

// Store data in local storage
localStorage.setItem("reading-mode", "Dark");

// Retrieve data from local storage
const mode = localStorage.getItem("reading-mode");
console.log(mode); // Output: "Dark"

// Remove data from local storage
localStorage.removeItem("reading-mode");

Съхранение на сесии

Съхранението на сесии, подобно на локалното хранилище, ви позволява да съхранявате данни от страна на клиента, но с няколко ключови разлики. Данните, съхранявани в хранилището на сесията, са достъпни само за текущата сесия и ще бъдат изтрити, когато потребителят затвори браузъра или сесията приключи. Данните ще изчезнат, когато затворим текущия раздел.

По същия начин, за да съхранявате данни в хранилището на сесията, използвайте sessionStorageobject и неговия setItem() метод
За да извлечете съхранените данни, използвайте getItem() метода
За да изтриете съхранените данни, използвайте removeItem() метода

sessionStorage.setItem("key", "value");
const value = sessionStorage.getItem("key");
sessionStorage.removeItem("key");

Ето прост пример за това как да използвате хранилището на сесията:

// Store data in session storage
sessionStorage.setItem("jwt", "jhvafjsavjv234be2h");
// Retrieve data from session storage
const username = sessionStorage.getItem("jwt");
console.log(username); // Output: "jhvafjsavjv234be2h"
// Remove data from session storage
sessionStorage.removeItem("jwt");

Локалното хранилище и съхранението на сесии осигуряват лесен и ефективен начин за съхраняване на данни от страната на клиента в JavaScript. Използвайте локално хранилище, когато трябва да запазите данни дори след като потребителят затвори браузъра, и използвайте хранилище за сесия, когато трябва да съхранявате данни само за текущата сесия.

Бисквитки срещу локално хранилище срещу хранилище за сесии

Нека разберем разликите и кой да изберем, като вземем предвид нашите изисквания...

Бисквитки

Бисквитките са малки текстови файлове, които се съхраняват на компютъра на потребителя и могат да се използват за съхраняване на данни като потребителски предпочитания, идентификационни данни за вход и съдържание на количката за пазаруване. Бисквитките съществуват от ранните дни на мрежата и все още се използват широко днес. Cookies are the primary choice for reading server side renders.

Предимства на бисквитките:

  • Широко поддържан от всички браузъри
  • Може да съхранява малки количества данни
  • Може да се настрои да изтече след определено време
  • Може да се чете както от скриптове от страна на клиента, така и от страна на сървъра

Недостатъци на бисквитките:

  • Ограничени до 4 KB данни на бисквитка
  • Може да бъде бавендостъп поради размера им
  • Може да представлява риск за сигурносттаако чувствителните данни се съхраняват в обикновен текст
  • Може да се изтрие от потребителя или неговия браузър

Локално съхранение

Предимства на локалното съхранение:

  • Може да съхранява по-големи количества данни (до 5 MB)
  • По-бърз достъп пъти от бисквитките
  • Данните се съхраняват във формат ключ-стойност, което улеснява достъпа и манипулирането им
  • Не се изпраща с всяка заявка, което намалява натоварването на мрежата

Недостатъци на локалното съхранение:

  • Не се поддържа от всички браузъри
  • Данните не са достъпни от страната на сървъра
  • Няма време за изтичане, което означава, че данните ще продължат да съществуват, дори ако вече не са необходими

Съхранение на сесии

Предимства на съхранението на сесии:

  • Може да съхранява по-големи количества данни (до 5 MB)
  • По-бързи времена за достъп от бисквитките
  • Данните се съхраняват във формат ключ-стойност, което улеснява достъпа и манипулирането им
  • Не се изпраща с всяка заявка, което намалява натоварването на мрежата
  • Данните се изтриват, когато сесията приключи, намалявайки бъркотията

Недостатъци на съхранението на сесии:

  • Не се поддържа от всички браузъри
  • Данните не са достъпни от страната на сървъра
  • Данните се изтриват, когато сесията приключи, което означава, че може да не са налични, когато потребителят се върне на сайта.

В заключение, изборът дали да използвате бисквитки, локално хранилище или съхранение на сесии зависи изцяло от вашите специфични нужди. Ако трябва да съхранявате малки количества данни, които трябва да се съхраняват за ограничено време, бисквитките може да са най-добрият избор. Ако трябва да съхранявате по-големи количества данни, които продължават дори след като потребителят затвори браузъра, използвайте локално хранилище. Ако трябва да съхранявате данни само за текущата сесия, използвайте съхранение на сесия.

Повече съдържание в PlainEnglish.io.

Регистрирайте се за нашия безплатен седмичен бюлетин. Следвайте ни в Twitter, LinkedIn, YouTube и Discord .

Интересувате ли се от мащабиране на стартирането на вашия софтуер? Вижте Circuit.