Различия

Показаны различия между двумя версиями страницы.

--- veb-sxovischa [2023/12/29 19:12]
tro
+++ veb-sxovischa [2024/01/16 18:40] (текущий)
tro
@@ Строка 1: / Строка 1: @@
-Вебсховище — це механізм у веббраузерах, який дозволяє вебдодаткам зберігати та отримувати дані на стороні клієнта, тобто на комп'ютері користувача. Щоразу, коли ти змінюєш тему кольорів між світлою і темною, переглядаєш відео, додаєш товар у кошик, відкриваєш або закриваєш сайдбар, популярні вебзастосунки можуть запам'ятовувати стан інтерфейсу і в наступному відвідуванні відновлювати його.
+====== Вебсховище ======
-====== Сookie ======
+ Це механізм у веббраузерах, який дозволяє вебдодаткам зберігати та отримувати дані на стороні клієнта, тобто на комп'ютері користувача. Щоразу, коли ти змінюєш тему кольорів між світлою і темною, переглядаєш відео, додаєш товар у кошик, відкриваєш або закриваєш сайдбар, популярні вебзастосунки можуть запам'ятовувати стан інтерфейсу і в наступному відвідуванні відновлювати його.
+===== Сookie =====
   * Механізм для зберігання невеликих фрагментів текстових даних клієнта або сервера у браузері як пари ключ-значення. Сookie також мають позначку часу закінчення терміну їх дії, після чого автоматично видаляються браузером.
   * Браузер і сервер можуть установлювати та отримувати cookie з браузера користувача. Крім того, cookie можуть автоматично надсилатися разом із кожним HTTP-запитом на сервер. У результаті сервер може легко розпізнати інформацію користувача з кожним HTTP-запитом, який зробив користувач.
-====== Web Storage API ======
+===== Web Storage API =====
   * Вебсховище не зберігає паролі, номери банківських карт та іншу конфіденційну інформацію. Якщо шкідливий скрипт отримає доступ до вебсторінки, він без проблем зможе прочитати ці дані.
   * Вебсховище складається з локального сховища та сховища сеансів.
@@ Строка 10: / Строка 11: @@
 ====== Інструменти розробника ======
 {{:webtoolstorage.png?600|}}
-====== window.localStorage  ======
+====== Локальне сховище. window.localStorage ======
 Доступ до локалього сховища
 <code>
@@ Строка 16: / Строка 17: @@
 // Storage {length: 0}
 </code>
-====== setItem ======
+===== setItem =====
 Додавання даних до локального сховища
 <code>
 localStorage.setItem("ui-theme", "light");
+</code>
+<code>
+const settings = {
+  theme: "dark",
+  isAuthenticated: true,
+  options: [1, 2, 3],
+};
+localStorage.setItem("settings", JSON.stringify(settings));
+</code>
+===== getItem =====
+дозволяє зчитати зі сховища запис із ключем key і повертає його значення у JSON форматі.
+<code>
+const savedTheme = localStorage.getItem("ui-theme");
+console.log(savedTheme); // "light"
+</code>
+===== removeItem =====
+Видаляє зі сховища існуючий запис з ключем key. В результаті своєї роботи він не повертає значення.
+  * **По ключу**
+<code>
+localStorage.setItem("ui-theme", "dark");
+console.log(localStorage.getItem("ui-theme")); // "dark"
+localStorage.removeItem("ui-theme");
+console.log(localStorage.getItem("ui-theme")); // null
+</code>
+  * **Полная очистка**
+<code>
+localStorage.clear();
+</code>
+====== Сховище сессії. window.sessionStorage======
+Доступ до сховища сесії
+<code>
+console.log(window.sessionStorage);
+// Storage {length: 0}
+</code>
+===== setItem =====
+Додавання даних до сховища сесії
+<code>
+sessionStorage.setItem("ui-theme", "light");
+</code>
+<code>
+const settings = {
+  theme: "dark",
+  isAuthenticated: true,
+  options: [1, 2, 3],
+};
+sessionStorage.setItem("settings", JSON.stringify(settings));
+</code>
+===== getItem =====
+дозволяє зчитати зі сховища сесії запис із ключем key і повертає його значення у JSON форматі.
+<code>
+const savedTheme = sessionStorage.getItem("ui-theme");
+console.log(savedTheme); // "light"
+</code>
+===== removeItem =====
+Видаляє зі сховища сесії існуючий запис з ключем key. В результаті своєї роботи він не повертає значення.
+  * **По ключу**
+<code>
+sessionStorage.setItem("ui-theme", "dark");
+console.log(sessionStorage.getItem("ui-theme")); // "dark"
+sessionStorage.removeItem("ui-theme");
+console.log(sessionStorage.getItem("ui-theme")); // null
+</code>
+  * **Полная очистка**
+<code>
+sessionStorage.clear();
+</code>
+===== key =====
+ отримання ключа за індексом
+<code>
+const myKey = localstorage.key(0);
 </code>