Головна    Статті    Карта    Зв'язок   

Web Storage

Web Storage: простіший та більш потужніший засіб зберігання даних на стороні клієнта



грудень 2014

- Ця стаття є моїм навчальним матеріалом, оригінал цієї статті розташований за url-адресою Web Storage: Easier, More Powerful Client-Side Data Storage . Прошу відмітити, що я не професійний перекладач, тому можуть бути деякі неточності в перекладі статті, а також можливе не зовсім точне розуміння самого матеріалу :), щоб уникнити непорозумінь перевіряйте викладений матеріал з оригіналом статті самостійно.

Анатолій

Вступ

Сьогодні Web технології розвиваються досить швидко, з використанням більш зручнішого та розвинутого Javascript, що відповідає останнім програмним стандартам та технологіям. Ми все частіше використовуємо Web технології і вони стають частиною нашого повсякденного життя. Один із напрямків, що був дещо обмежений в розвитку, це зберігання даних на стороні клієнта. Так було, до цього часу....

Web Storage програмний продукт розробників консорціуму W3C, що передбачає більшу функціональність при збереженні даних на стороні клієнта. Збереження даних відбувається як до кінця сесії перегляду веб-сторінки Пам'ять Сеансу (Session Storage) так і після завершення сеансу перегляду Локальна Пам'ять(Local Storage). Він більш ефективніший ніж традиційні cookies, та зручніший в роботі. В цій статті ми розглянемо чому це так і як з ним працювати.

Існуюча проблема: Сookies можна зломити

Перед тим як йти далі, давайте коротко переглянемо на збереження даних за допомогою cookies, та які є проблеми при їх використанні:
- Малий об'єм. Сookies в основному мають максимальний розмір 4кВ, що недостатньо для зберігання складних даних.
- Використовуючи Сookies складно відслідковувати переходи між сторінками одного і того ж сайту, що приводить до необхідності використання двух чи більше таблиць Сookies і різних складних скриптів, що знову ж знижує безпеку сайту.
- Інші (менш популярні) альтернативні рішення для Сookies включають техніки баз даних query, методики захованих полів форм, об'єкти флеш та інше. Кожен з своїми певними недоліками щодо безпеки, величини об'єму, зручності використання та інше. Тобто до цього часу була відносно слабка методика зберігання даних на стороні клієнта. Потрібне було краще рішення зберігання даних, таким рішенням стало застосування методики Web Storage.

Web Storage

Документація Web Storage була розроблена консорціумом W3C для покращення роботи зі зберігання даних на стороні клієнту. Є два різних типи Сховищ: Пам'ять Сеансу (Session Storage) та Локальна Пам'ять (Local Storage).

    Обидва Сховища Пам'ять Сеансу (Session Storage) та Локальна Пам'ять (Local Storage) мають можливість зберігати дані об'ємом 5 Мб для одного домену, що суттєво важливіше ніж спроможність Сookies.

    Розглянемо, в чому перевага Web Storage.

Пам'ять Сеансу (Session Storage)

Пам'ять Сеансу (Session Storage) має завдання зберігати дані вашої сесії під час перегляду веб-сторінки, та видаляти їх як лише ви закрили дану сторінку в якій працювали.

зберігання та оновлення даних
    Для встановлення пари ключів Session Storage вам необхідно написати слідуючий вираз

sessionStorage.setItem(yourkey, yourvalue);            (А)

    для того, щоб оновити дані неохідно написати

var item = sessionStorage.getItem(yourkey);         (Б)

    запишем вираз для збереження рядка "Це зразок"

sessionStorage.setItem(1, 'Це зразок');         (В)

    в цьому виразі за значення ключа прийнято "1", але варто відзначити, що це не мається на увазі перший запис як такий. В цьому прикладі "1" перетворюється в строкові дані та використовується як ключ. Також, це інший ключ ніж у виразі А.
    Щоб вивести речення через повідомлення JavaScript, маєте написати:

var item = sessionStorage.getItem(1);
alert(item);

    Прикладом використання setItem() може бути:

sessionStorage.setItem('name', 'Ангеліна');

....та оновити значення як ...

var name = sessionStorage.getItem('name');

заміна та очищення даних
    Є методи для заміни та очищення даних з Пам'яті Сеансу (Session Storage). Метод removeItem() використовується для заміни частини елементів списку даних

var item = sessionStorage.removeItem(yourkey);

    памятаємо, що посилатись на дані можна таким чином:

var items = sessionStorage.removeItem(1);

    метод clear() використовується для очищення всіх елементів списку

sessionStorage.clear();

    можна використати атрибут length для того, щоб дізнатись кількість пар ключ/значення в Пам'яті Сеансу ;

var no_of_items = sessionStorage.length;

Локальна Пам'ять (Local Storage)

Локальна Пам'ять даних (Local Storage) використовується якщо вам необхідно, щоб дані зберігалися довше ніж сесія перегляду веб-документу. Простим прикладом використання може бути підрахунок кількості відвідувань веб сторінки. Якщо закрити сторінку(вікно), що використовує Локальну Пам'ять (Local Storage), а потім знову її відкрити, то вона все ще буде показувати введені дані.

Збереження та оновлення даних в Локальній Пам'яті (Local Storage) відбувається аналогічно Пам'яті Сеансу даних (Session Storage). Для збереження даних ви маєте написати щось на зразок:

localStorage.setItem(1, 'Це зразок даних');

та оновити запис...

var data = localStorage.getItem(1);

За такою ж схемою як і в Пам'яті Сеансу (Session Storage) в Локальній Пам'яті (Local Storage) підтримуються атрибути length, та методи removeItem(), clear().

Функція clear()в випадках Session та Local Storage має одинаковий принцип - очищення всіх значень в списку. Це значить, що якщо ви визиваєте, скажем localStorage.clear(), то функція очистить всі дані. Для прикладу, вся Локальна Пам'ять даних (Local Storage), скажем для
www.example.org,
www.example.org/abc/,
www.example.org/xyz/
буде очищена. Тим не менш, на слідуючі url-адреса впливу не буде:
abc.example.org
example.org:80

Зрозуміло для Пам'яті Сеансу (Session Storage) будуть очищені дані лише для поточної сесії.

Простий зразок Демо сторінка

Щоб продемонструвати роботу Web Storage в дії створений простий приклад, що використовує обидва сховища даних Session та Local Storage.

щоб перевірити роботу Web Storage. На Демо сторінці буде прохання ввести два рядка та запамятати їх, один для Пам'яті Сеансу (Session Storage), інший для Локальної Пам'яті (Local Storage) і якщо закрити сторінку, а потім відкрити, то дані що введені для сховища даних Локальної Пам'яті (Local Storage) залишаться, так як для сховища даних Пам'яті Сеансу (Session Storage) дані відсутні.

P.S. Поскільки це є навчальний матеріал, я додатково поставлю javascript з демо сторінки, для кращого усвідомлення роботи Web Storage

1 <script type="text/javascript">
2 window.onload = function(){
3 loadvalues();
4 };
5
6 function loadvalues(){
7 //отримуємо дані session storage
8 getthestuffSession();
9 //отримуємо дані local storage
10 getthestuffLocal();
11 }
12
13 function savethestuffSession(){
14 //отримуємо елемент
15 var lala = document.getElementById("first");
16 //присвоюємо йому якесь значення
17 var thevalue = lala.value;
18 //зберігаємо його з ключем 1
19 sessionStorage.setItem(1, thevalue);
20 //завантажуємо та виводимо на екран
21 getthestuffSession();
22 }
23
24 function getthestuffSession(){
25 var data;
26 //отримуємо елемент
27 var thediv = document.getElementById("displaysession");
28 //вибираємо значення за допомогою ключа, в нашому випадку 1
29 data = sessionStorage.getItem(1);
30 //якщо ми маємо щось
31 if (data){
32 //виводимо текст із значення даних за допомогою innerHTML
33 thediv.innerHTML = "Введене значення - "+data;
34 }
35
36 //слідуючі функції працюють аналогічно
37 function savethestuffLocal(){
38 var lala = document.getElementById("second");
39 var thevalue = lala.value;
40 localStorage.setItem(1, thevalue);
41 getthestuffLocal();
42 }
43
44 function getthestuffLocal(){
45 var data;
46 var thediv = document.getElementById("displaylocal");
47 data = localStorage.getItem(1);
48 if (data){
49 thediv.innerHTML = "Введене значення - "+data;
50 }
51
52 </script>


Події (Storage event) при використанні сховища даних

Документація також передбачає storage event , які виконуються при внесенні змін в зберігання даних.
Передбачені такі атрибути як:



Ейнштейн

Анатолій:
- Зупинюсь на такому об'ємі розглянутих даних про Web Storage.
Якщо виникають питання можете їх задати на україномовному форумі для програмістів Replace.org.ua