Localstorage

В редакції HTML5 з'явився новий об'єкт window.localStorage.

Локальне сховище даних має подібну функціональність до cookies, але дозволяє зберігати більше даних.

Окрім того, локальні сховища дозволяють створювати локальні бази даних та локальну файлову систему.

Для роботи з локальним сховищем є декілька зручних методів:


				localStorage.setItem(key, value);

				localStorage.getItem(key);

				localStorage.removeItem(key);

				localStorage.clear();


				console.dir(localStorage);


				let data = [5, 12, '32', 7, 'html', '99'];

				localStorage.setItem('bar', data);

				localStorage.setItem('hey', 'ho');


				let foo = localStorage.getItem('bar');

				console.log(foo);

				console.log(localStorage.getItem('hello'));


				localStorage.removeItem('bar');

				localStorage.clear();

Окрім того, до елементів локального сховища можна звертатися як до властивостей об'єкта:


				localStorage.setItem('name', 'Masha');

				alert(localStorage.name);

В локальне сховище можна зберігати масиви, об'єкти:


				let obj = { name: 'Masha', age: 17, gender: 'female' };

				localStorage.setItem('user', JSON.stringify(obj));


				let newObj = localStorage.getItem('user');


				newObj = JSON.parse(newObj);


				let newObj = JSON.parse(localStorage.getItem('user'));

Якщо потрібно задати термін дії для даних, що зберігаються - доведеться робити це вручну:
- записати дані;
- записати дату (в числовому форматі) - кінцевий термін "придатності даних";
- при відкритті сторінки звіряти дату, якщо вона просрочена - видалити дані.

Домашнє завдання

Підключіть файл cookie.js у ваш проект.
Запишіть в куки: "car=Mercedes"; "planer=Boeing". Зчитайте значення цих куки, збережіть у змінні та виведіть в консоль. В консолі введіть document.cookie, подивіться всі куки.
Створіть 2 кнопки і поле вводу. По кліку на одну буде записано cookie з текстом поля вводу, по кліку на другу - виводити alert зі строкою. Закрийте вкладку, відкрийте знову, перевірте, чи зберіглося куки, клацнувши на другу кнопку.
При вході на сторінку перевіряйте наявність куки зі своїм іменем. Якщо воно є - виведіть у який-небудь блок, наприклад, <p> вітання: "Привіт, %username% !", якщо немає - запитайте ім'я за допомогою функції prompt(). Після вводу імені запишіть кукі та виведіть вітання.
Створіть масив довжиною 8 елементів з довільних чисел. Додайте на 4 та 7 місця строки зі своїм ім’ям та прізвищем, на 2 місце - об’єкт "Гарбуз" з трьома властивостями. Запишіть цей масив в localStorage, зчитайте його у змінну та виведіть у консоль.
Зробіть завдання 1..6 за допомогою localStorage.
Дано бокове (вертикальне) меню.
Потрібно зробити можливість змінювати позиції пунктів меню. Створіть кнопку, яка б переключала меню в режим редагування:
біля кожного пункта меню повинно з'явитися дві кнопки зі стрілками вгору і вниз.
При кліку на відповідну кнопку пункт меню повинен переміститися вгору чи вниз.
Поточний порядок пунктів меню зберігайте у localstorage.