Localstorage. Локальна пам`ять на html5.

Привіт всім! У цій статті ми розберемо, що таке localStorage і як його використовувати.

Вступ

LocalStorage - локальне сховище. Тобто це спеціально відведене місце в браузері (щось на зразок невеликої бази даних), де ми можемо записувати, читати і видаляти якісь дані. Насправді, локальне сховище дуже схоже на COOKIE, але є відмінності. Ось давайте про них і поговоримо. Cookie дуже обмежені. В одній cookie може бути всього 4096 символів, а їх кількість на один домен приблизно 30-50 в залежності від браузера. У локальному сховищі ми можемо зберігати 5-10мб або навіть більше на тривалий час.

Де їх використовувати

Найбільша відмінність cookie від localStorage - це те, що перший працює з сервером, а другий ні, хоча це теж можна зробити, але про це трохи пізніше. використовуйте локальне сховище там, де вам не потрібна тісна робота з сервером, а потрібно зберігати якісь тимчасові дані. Наприклад, уявімо, що ви створюєте якийсь web-додаток, куди людина може зайти, ввести кілька завдань, які він хоче зробити за день і видалити ті, які вже виконав. Навіщо нам тут сервер? Правильно, нема чого. Ось тут і варто використовувати localStorage. Людина заходить, вводить завдання, вони записуються в спеціальне місце його браузера і там зберігаються. Коли людина зайде знову через якийсь час, вони будуть звідти обрані і показані. Наприклад, клікнувши по завданню, вона буде віддалятися з локального сховища і, отже, показуватися йому вже не буде. Перейдемо до того, як його використовувати.

Як використовувати localStorage

Зберігаються дані також, як і в cookie - ключ: значення. Щоб додати нове значення, напишіть так:

localStorage.setItem(`Ключ`,`Значення`) -

Ми використовуємо об`єкт localStorage і його метод setItem, куди передаємо ключ і значення.

Щоб отримати дані, пишемо наступне:

var value = localStorage.getItem(`Ключ`) -

В результаті, в змінну value потрапить значення, яке зберігається під ключем, який ми передаємо в метод getItem.

видаляємо дані

localStorage(`Ключ`) -// видалить дані під переданим ключем 
localStorage.clear() -// повністю очистить локальне сховище

Щоб перевірити, чи не переповнений чи локальне сховище, ви можете використовувати константу QUOTA_EXCEEDED_ERR

try{ 
 localStorage.setItem(`Ключ`,`Значення`) - 
}catch(e){ 
if(e == QUOTA_EXCEEDED_ERR){ 
 alert(`Перевищено ліміт`) - 
} 
}

Ось і все, що слід знати про localStorage. Варто сказати, що крім цього об`єкта є ще один - sessionstorage. Відрізняється він тільки тим, що зберігає дані тільки для однієї вкладки, і вони будуть видалені, як тільки користувач закриє вкладку.

На початку статті я говорив, що локальне сховище створено для того, щоб зберігати локальні дані і не спілкуватися з сервером, але, проте, така можливість у нас все-таки є. Думаю, деякі вже могли здогадатися, як це зробити. Отже, якщо вам потрібно відправити якісь дані на сервер, то зробіть наступне: отримаєте дані з локального сховища, перетворіть їх в JSON рядок і відправте за допомогою технології Ajax. Так само можна їх і приймати від сервера.

підсумок

Отже, використовуйте localStorage там, де вам не потрібно спілкуватися з сервером, а потрібно зберігати дані локально, в браузері у користувача. Все, що вам для цього потрібно, ми розглянули в цій статті. Дякую за увагу і до зустрічі!

Поділися в соціальних мережах:

Схожі