Различия

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

--- veb-sxovischa [2023/12/29 19:07]
tro [Інструменти розробника]
+++ veb-sxovischa [2024/01/16 18:40] (текущий)
tro
@@ Строка 1: / Строка 1: @@
-Вебсховище — це механізм у веббраузерах, який дозволяє вебдодаткам зберігати та отримувати дані на стороні клієнта, тобто на комп'ютері користувача. Щоразу, коли ти змінюєш тему кольорів між світлою і темною, переглядаєш відео, додаєш товар у кошик, відкриваєш або закриваєш сайдбар, популярні вебзастосунки можуть запам'ятовувати стан інтерфейсу і в наступному відвідуванні відновлювати його.
+====== Вебсховище ======
-====== Сookie ======
+ Це механізм у веббраузерах, який дозволяє вебдодаткам зберігати та отримувати дані на стороні клієнта, тобто на комп'ютері користувача. Щоразу, коли ти змінюєш тему кольорів між світлою і темною, переглядаєш відео, додаєш товар у кошик, відкриваєш або закриваєш сайдбар, популярні вебзастосунки можуть запам'ятовувати стан інтерфейсу і в наступному відвідуванні відновлювати його.
+===== Сookie =====
   * Механізм для зберігання невеликих фрагментів текстових даних клієнта або сервера у браузері як пари ключ-значення. Сookie також мають позначку часу закінчення терміну їх дії, після чого автоматично видаляються браузером.
   * Браузер і сервер можуть установлювати та отримувати cookie з браузера користувача. Крім того, cookie можуть автоматично надсилатися разом із кожним HTTP-запитом на сервер. У результаті сервер може легко розпізнати інформацію користувача з кожним HTTP-запитом, який зробив користувач.
-====== Web Storage API ======
+===== Web Storage API =====
   * Вебсховище не зберігає паролі, номери банківських карт та іншу конфіденційну інформацію. Якщо шкідливий скрипт отримає доступ до вебсторінки, він без проблем зможе прочитати ці дані.
   * Вебсховище складається з локального сховища та сховища сеансів.
-  * **Локальне сховище (Local Storage)**: унікальне для кожного вебдодатку і буде однаковим на кількох вкладках, де вебдодаток відкритий. Дані в локальному сховищі не видаляються, навіть після закриття браузера або вимкнення комп'ютера. Щоб їх видалити, потрібно використовувати JavaScript. Доступ до даних у локальному сховищі можливий з будь-якої вкладки або вікна браузера, пов'язаної з доменом, який створив дані.
+  * **Локальне сховище (Local Storage)**: унікальне для кожного вебдодатку і буде однаковим на кількох вкладках, де вебдодаток відкритий. Дані в локальному сховищі не видаляються, навіть після закриття браузера або вимкнення комп'ютера. Щоб їх видалити, потрібно використовувати JavaScript. Доступ до даних у локальному сховищі можливий з будь-якої вкладки або вікна браузера, пов'язаної з доменом, який створив дані. Локальне сховище може зберігати дані розміром **від 5 Мб до 10 Мб**. Точний обсяг пам’яті залежить від реалізації кожного браузера, але це значно більше, ніж 4 Кб пам’яті, яку пропонують cookie.
   * **Сховище сесії (Session Storage)**: на відміну від локального сховища, дані у сховищі сесії зберігаються лише протягом одної сесії браузера. Якщо користувач закриє вкладку або браузер, дані будуть видалені. Сховище сесії зручне для зберігання тимчасових даних або станів, які не повинні зберігатися довгий час.
 ====== Інструменти розробника ======
 {{:webtoolstorage.png?600|}}
+====== Локальне сховище. window.localStorage ======
+Доступ до локалього сховища
+<code>
+console.log(window.localStorage);
+// Storage {length: 0}
+</code>
+===== 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>