diff --git a/6-data-storage/02-localstorage/1-form-autosave/task.md b/6-data-storage/02-localstorage/1-form-autosave/task.md index 2b147d79c..cdae6bf42 100644 --- a/6-data-storage/02-localstorage/1-form-autosave/task.md +++ b/6-data-storage/02-localstorage/1-form-autosave/task.md @@ -1,10 +1,10 @@ -# Autosave a form field +# Автозбереження поля форми -Create a `textarea` field that "autosaves" its value on every change. +Створіть поле `textarea`, яке "автозбереже" своє значення при кожній зміні. -So, if the user accidentally closes the page, and opens it again, he'll find his unfinished input at place. +Отже, якщо користувач випадково закриє сторінку і знову відкриє її, він знайде свій незавершений текст у полі. -Like this: +Приклад: [iframe src="solution" height=120] diff --git a/6-data-storage/02-localstorage/article.md b/6-data-storage/02-localstorage/article.md index 3b4df0a6a..17dd4c782 100644 --- a/6-data-storage/02-localstorage/article.md +++ b/6-data-storage/02-localstorage/article.md @@ -1,83 +1,83 @@ # LocalStorage, sessionStorage -Web storage objects `localStorage` and `sessionStorage` allow to save key/value pairs in the browser. +Об’єкти веб-сховища `localStorage` та `sessionStorage` дозволяють зберігати дані в браузері у вигляди пар ключ/значення. -What's interesting about them is that the data survives a page refresh (for `sessionStorage`) and even a full browser restart (for `localStorage`). We'll see that very soon. +Що цікаво, дані зберігаються навіть після оновлення сторінки (для `sessionStorage`) і після повного закриття і нового відкриття вікна браузера (для `localStorage`). Ми скоро перевіримо це на практиці. -We already have cookies. Why additional objects? +Ми вже маємо `cookies`. Навіщо додаткові об’єкти? -- Unlike cookies, web storage objects are not sent to server with each request. Because of that, we can store much more. Most browsers allow at least 2 megabytes of data (or more) and have settings to configure that. -- Also unlike cookies, the server can't manipulate storage objects via HTTP headers. Everything's done in JavaScript. -- The storage is bound to the origin (domain/protocol/port triplet). That is, different protocols or subdomains infer different storage objects, they can't access data from each other. +- На відміну від файлів cookies, об’єкти веб-сховища не надсилаються на сервер із кожним запитом. Завдяки цьому ми можемо зберігати набагато більше даних. Більшість браузерів дозволяють принаймні 2 мегабайти даних (або більше), користувач може навіть змінити цей об’єм. +- Крім того, на відміну від файлів cookies, сервер не може маніпулювати об’єктами сховища через HTTP-заголовки. Все зроблено на JavaScript. +- Сховище прив’язане до оригінального сайту (домен/протокол/порт). Таким чином, що різні протоколи або субдомени мають різні об’єкти зберігання, і не можуть отримати доступ до даних один одного. -Both storage objects provide same methods and properties: +Обидва об’єкти сховища забезпечують однакові методи та властивості: -- `setItem(key, value)` -- store key/value pair. -- `getItem(key)` -- get the value by key. -- `removeItem(key)` -- remove the key with its value. -- `clear()` -- delete everything. -- `key(index)` -- get the key on a given position. -- `length` -- the number of stored items. +- `setItem(key, value)` -- зберегти пару ключ/значення. +- `getItem(key)` -- отримати значення за ключем. +- `removeItem(key)` -- видалити дані за ключем. +- `clear()` -- видалити все. +- `key(index)` -- отримати ключ на заданій позиції. +- `length` -- кількість збережених елементів. -As you can see, it's like a `Map` collection (`setItem/getItem/removeItem`), but also allows access by index with `key(index)`. +Як ви можете бачити, це схоже на колекцію `Map` (`setItem/getItem/removeItem`), але також дозволяє отримати доступ за індексом за допомогою `key(index)`. -Let's see how it works. +Давайте подивимося, як це працює. -## localStorage demo +## Демонстрація роботи localStorage -The main features of `localStorage` are: +Основними особливостями `localStorage` є: -- Shared between all tabs and windows from the same origin. -- The data does not expire. It remains after the browser restart and even OS reboot. +- Спільний доступ з усіх вкладок і вікон для одного і того ж самого сайту. +- Термін дії даних не закінчується. Дані залишаються після перезавантаження браузера і навіть перезавантаження ОС. -For instance, if you run this code... +Наприклад, якщо ви запустите цей код... ```js run localStorage.setItem('test', 1); ``` -...And close/open the browser or just open the same page in a different window, then you can get it like this: +...І закриєте/відкриєте браузер або просто відкриєте ту саму сторінку в іншому вікні, то зможете отримати дані так: ```js run alert( localStorage.getItem('test') ); // 1 ``` -We only have to be on the same origin (domain/port/protocol), the url path can be different. +Ми повинні бути на тому ж самому сайті (домен/порт/протокол), шлях URL-адреси може відрізнятись -The `localStorage` is shared between all windows with the same origin, so if we set the data in one window, the change becomes visible in another one. +`localStorage` доступний для одного сайту в усіх відкритих вікнах, тому якщо ми встановимо дані в одному вікні, зміна стане видимою в іншому. -## Object-like access +## Доступ як до звичайного об’єкту -We can also use a plain object way of getting/setting keys, like this: +Ми також можемо використовувати простий об’єктний спосіб отримання/запису даних, наприклад: ```js run -// set key +// записати дані за ключем localStorage.test = 2; -// get key +// отримати дані за ключем alert( localStorage.test ); // 2 -// remove key +// видалити дані delete localStorage.test; ``` -That's allowed for historical reasons, and mostly works, but generally not recommended, because: +Це дозволено з історичних причин і в цілому працює, але зазвичай не рекомендується, оскільки: -1. If the key is user-generated, it can be anything, like `length` or `toString`, or another built-in method of `localStorage`. In that case `getItem/setItem` work fine, while object-like access fails: +1. Якщо ключ створений користувачем, він може бути будь-яким, наприклад, `length` або `toString`, або іншим вбудованим методом `localStorage`. У цьому випадку `getItem/setItem` працює нормально, тоді як доступ через об’єкт ні: ```js run let key = 'length'; - localStorage[key] = 5; // Error, can't assign length + localStorage[key] = 5; // Помилка, не вдається задати length ``` -2. There's a `storage` event, it triggers when we modify the data. That event does not happen for object-like access. We'll see that later in this chapter. +2. Існує подія `storage`, вона запускається, коли ми змінюємо дані. Ця подія не відбувається при зміні даних без виклику `setItem`. Ми поговоримо про це пізніше в цьому розділі. -## Looping over keys +## Перебір ключів -As we've seen, the methods provide "get/set/remove by key" functionality. But how to get all saved values or keys? +Як ми бачили, методи забезпечують функцію "отримати/записати/видалити за ключем". Але як отримати всі збережені значення чи ключі? -Unfortunately, storage objects are not iterable. +На жаль, об’єкти зберігання не є ітераційними. -One way is to loop over them as over an array: +Один із способів -- працювати з ними як з масивом: ```js run for(let i=0; i { // can also use window.addEventListener('storage', event => { +// запускає оновлення, створені в тому самому сховищі з інших документів +window.onstorage = event => { // також можна використовувати window.addEventListener('storage', event => { if (event.key != 'now') return; - alert(event.key + ':' + event.newValue + " at " + event.url); + alert(event.key + ':' + event.newValue + " в " + event.url); }; -localStorage.setItem('now', Date.now()); +localStorage.setItem('now', ​​Date.now()); ``` -Please note that the event also contains: `event.url` -- the url of the document where the data was updated. +Зверніть увагу, що подія також містить: `event.url` -- URL-адресу документа, в якому оновлено дані. -Also, `event.storageArea` contains the storage object -- the event is the same for both `sessionStorage` and `localStorage`, so `event.storageArea` references the one that was modified. We may even want to set something back in it, to "respond" to a change. +Крім того, `event.storageArea` містить об’єкт сховища -- подія однакова для `sessionStorage` та `localStorage`, тому `event.storageArea` посилається на той, який було змінено. Ми навіть можемо захотіти щось змінити в ньому, "відреагувати" на зміни. -**That allows different windows from the same origin to exchange messages.** +**Це дозволяє різним вікнам одного сайту обмінюватися повідомленнями.** -Modern browsers also support [Broadcast channel API](mdn:/api/Broadcast_Channel_API), the special API for same-origin inter-window communication, it's more full featured, but less supported. There are libraries that polyfill that API, based on `localStorage`, that make it available everywhere. +Сучасні браузери також підтримують [Broadcast channel API](mdn:/api/Broadcast_Channel_API), спеціальний API для міжвіконного зв’язку одного джерела, він більш повнофункціональний, але має меншу підтримку серед браузерів. Існують бібліотеки-поліфіли цього API на основі `localStorage`, що робить його доступним майже скрізь. -## Summary +## Підсумки -Web storage objects `localStorage` and `sessionStorage` allow to store key/value in the browser. -- Both `key` and `value` must be strings. -- The limit is 5mb+, depends on the browser. -- They do not expire. -- The data is bound to the origin (domain/port/protocol). +Об’єкти веб-сховища `localStorage` та `sessionStorage` дозволяють зберігати ключ/значення в браузері. +- І `key`, і `value` мають бути рядками. +- Ліміт становить 5 Мб+, залежить від браузера. +- Дані не мають терміну зберіганя, тобто не видаляються. +- Дані прив’язані до сайту (домен/порт/протокол). | `localStorage` | `sessionStorage` | |----------------|------------------| -| Shared between all tabs and windows with the same origin | Visible within a browser tab, including iframes from the same origin | -| Survives browser restart | Survives page refresh (but not tab close) | +| Спільний для всіх вкладок і вікон з однаковим сайтом | Відображається у вкладці браузера, включаючи iframe того самого сайту| +| Не видаляється при перезапуску браузера | Витримує оновлення сторінки (але не закриття вкладки) | API: -- `setItem(key, value)` -- store key/value pair. -- `getItem(key)` -- get the value by key. -- `removeItem(key)` -- remove the key with its value. -- `clear()` -- delete everything. -- `key(index)` -- get the key number `index`. -- `length` -- the number of stored items. -- Use `Object.keys` to get all keys. -- We access keys as object properties, in that case `storage` event isn't triggered. +- `setItem(key, value)` -- зберегти пару ключ/значення. +- `getItem(key)` -- отримати значення за ключем. +- `removeItem(key)` -- видалити дані за ключем. +- `clear()` -- видалити все. +- `key(index)` -- отримати ключ на заданій позиції. +- `length` -- кількість збережених елементів. +- Використовуйте `Object.keys`, щоб отримати всі ключі. +- Ми маємо доступ до ключів як властивостей об’єкта та можемо ними маніпулювати, у цьому випадку подія `storage` не ініціюється. -Storage event: +Подія storage: -- Triggers on `setItem`, `removeItem`, `clear` calls. -- Contains all the data about the operation (`key/oldValue/newValue`), the document `url` and the storage object `storageArea`. -- Triggers on all `window` objects that have access to the storage except the one that generated it (within a tab for `sessionStorage`, globally for `localStorage`). +- Спрацьовує на виклики `setItem`, `removeItem`, `clear`. +- Містить усі дані про операцію (`key/oldValue/newValue`), URL-адресу документа та об’єкт сховища `storageArea`. +- Спрацьовує для всіх об’єктів `window`, які мають доступ до сховища, крім того, який його створив (у межах вкладки для `sessionStorage`, глобально для `localStorage`).