Андроїд. Операційна система. Мультимедіа. Соціальні мережі. Інструменти. Кодеки. Графіка
Ви тут: » »

Як очистити локальне сховище html5. Огляд засобів зберігання даних на стороні клієнта

Зберігання даних безпосередньо в браузері має безліч переваг, основна з яких це швидкий і незалежний від мережі доступ до бази даних. на Наразіє 4 активні методи для цього (плюс один застарілий):

  1. Локальне сховище
  2. Сесійне сховище
  3. IndexedDB
  4. WebSQL (застаріле)

Кукі

Кукі це класичний спосіб зберігання простих малих даних усередині документа. Зазвичай куки надсилаються з сервера на клієнт, який може зберігати їх, а потім відправляти назад на сервер у відповідь на наступні запити. Це може бути використане для таких речей, як керування сесіями облікового запису або відстеження інформації користувача.

Додатково кукі можна використовувати і для простого зберігання даних на стороні клієнта. Тому вони також часто використовуються для зберігання загальних даних типу налаштувань користувача.

Базові CRUD-операції з куки

// Create document.cookie = "user_name=Ire Aderinokun"; document.cookie = "user_age=25;max-age=31536000;secure"; // Read (All) console.log(document.cookie); // Update document.cookie = "user_age=24;max-age=31536000;secure"; // Delete document.cookie = "user_name=Ire Aderinokun;expires=Thu, 01 Jan 1970 00:00:01 GMT";

Переваги куки

  • Їх можна використовувати для комунікації із сервером
  • Ми можемо визначити для cookie термін їхнього автоматичного закінчення замість того, щоб видаляти вручну.

Недоліки куки

  • Вони додаються до завантаження сторінки документа
  • Вони можуть зберігати невелику кількість даних
  • Вони можуть містити лише рядки.
  • Потенційні проблеми із безпекою.
  • Цей метод не рекомендується для зберігання даних на клієнті з моменту появи Web Storage API (локальне та сесійне сховище).

Підтримка у браузерах

Cookie має базову підтримку у всіх великих браузерах.

Локальне сховище

Локальне сховище це один із різновидів Web Storage API, спеціального API для зберігання даних у браузері у форматі ключ-значення. Цей API був створений як рішення для проблем з cookie і є більш інтуїтивним і безпечним способомзберігання простих даних усередині браузера.

Хоча технічно ми можемо зберігати у локальному сховищі лише рядки, це обходиться за рахунок перетворення на JSON. Таким чином ми можемо зберігати в локальному сховищі складніші дані в порівнянні з куки.

Базові CRUD-операції з локальним сховищем

// Create const user = (name: "Ire Aderinokun", age: 25) localStorage.setItem("user", JSON.stringify(user)); // Read (Single) console.log(JSON.parse(localStorage.getItem("user"))) // Update const updatedUser = ( name: "Ire Aderinokun", age: 24 ) localStorage.setItem("user", JSON.stringify(updatedUser)); // Delete localStorage.removeItem("user");

Переваги локального сховища

  • Пропонує більш простий та інтуїтивний інтерфейс зберігання даних.
  • Більше безпечно для зберігання даних на клієнті.
  • Дозволяє зберігати більше даних (всі 3 пункти - порівняно з куки).

Недоліки локального сховища

  • Дозволяє зберігати лише рядки

Підтримка у браузерах

Сесійне сховище

Сесійне сховище це другий різновид Web Storage API. Воно точно таке ж, як і локальне сховище за винятком того, що дані зберігаються тільки для сесії вкладки браузера. Як тільки користувач виходить зі сторінки і закриває браузер, дані очищаються.

Базові CRUD-операції із сесійним сховищем

// Create const user = (name: "Ire Aderinokun", age: 25) sessionStorage.setItem("user", JSON.stringify(user)); // Read (Single) console.log(JSON.parse(sessionStorage.getItem("user"))) // Update const updatedUser = ( name: "Ire Aderinokun", age: 24 ) sessionStorage.setItem("user", JSON.stringify(updatedUser)); // Delete sessionStorage.removeItem("user");

Переваги, недоліки та підтримка в браузерах такі ж, як і у локального сховища.

IndexedDB

IndexedDB це набагато більш складне та опрацьоване рішення для зберігання даних у браузері, оскільки це низькорівневий API для зберігання на клієнті значної кількості структурованих даних. За своєю суттю це об'єктно-орієнтована база даних, що базується на JavaScript, яка дозволяє нам легко зберігати та витягувати дані, проіндексовані за ключом.

WebSQL

WebSQL це API для реляційної бази на клієнті, подібне до SQLite. З 2010 робоча група W3C припинила роботу над цією специфікацією, і цей API більше не є частиною специфікації HTML і не повинен використовуватися.

Огляд Web Storage

В Інтернеті інформацію можна зберігати у двох місцях: на веб-сервері та на веб-клієнті (тобто комп'ютері відвідувача сторінки). Певні типи даних краще зберігати у одному з цих місць, інші типи - у іншому.

Правильним місцем для зберігання конфіденційних та важливих даних буде веб-сервер. Наприклад, якщо ви покладете будь-які товари у свій кошик в онлайновому магазині, дані про вашу потенційну покупку зберігаються на веб-сервері. На вашому комп'ютері зберігається лише кілька байтів даних для відстеження, що містять інформацію про вас (або, вірніше, про ваш комп'ютер), щоб веб-сервер знав, який із кошиків ваш. Навіть із новими можливостями HTML5 змінювати цю систему немає потреби - вона надійна, безпечна та ефективна.

Але зберігання даних на сервері який завжди є найкращим підходом, т.к. іноді легше зберігати другорядну інформацію на комп'ютері користувача. Наприклад, має сенс зберігати локально налаштування користувача (скажімо, параметри, які визначають спосіб відображення веб-сторінки) і стан програми (знімок поточного стану веб-додатку), щоб відвідувач міг продовжити його виконання з того ж самого місця пізніше.

До HTML5 єдиним способом локального зберігання даних було використання механізму файлів cookies, який спочатку був розроблений для обміну невеликими обсягами ідентифікуючої інформації між веб-серверами та браузерами. Файли cookies підходять ідеально для зберігання невеликих обсягів даних, але модель JavaScript для роботи з ними дещо незграбна. Система файлів cookies також змушує розробника поратися з термінами дії і марно пересилати дані туди й назад інтернетом з кожним запитом сторінки.

У HTML5 вводиться найкраща альтернатива файлам cookies, яка дозволяє легко та просто зберігати інформацію на комп'ютері відвідувача. Ця інформація може зберігатися на клієнтському комп'ютерінеобмежений час, не відправляється на веб-сервер (якщо тільки розробник не зробить це сам), може бути великого обсягу і для роботи з нею потрібна лише пара простих, ефективних об'єктів JavaScript.

Ця можливість називається веб-сховищем (Web Storage)і особливо добре підходить для застосування з автономним режимомроботи сайтів, т.к. дозволяє створювати самодостатні автономні програми, які можуть зберігати всю необхідну їм інформацію навіть за відсутності підключення до Інтернету.

Функціональність веб-сховища HTML5 дозволяє веб-сторінці зберігати дані на комп'ютері відвідувача. Ця інформація може бути короткочасною, яка видаляється після вимкнення браузера, або довготривалою, яка залишається доступною під час наступних відвідувань веб-сторінки.

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

Існують два типи веб-сховищ, які так чи інакше пов'язані з двома об'єктами:

Локальне сховище

Використовує об'єкт localStorageдля зберігання даних для всього веб-сайту постійно. Це означає, що якщо веб-сторінка збереже дані в локальному сховищі, ці дані будуть доступні для користувача, коли він повернеться на цю веб-сторінку наступного дня, наступного тижня або наступного року.

Звичайно, більшість браузерів також надає користувачеві можливість очистити локальне сховище. У деяких браузерах вона реалізована як стратегія "все або нічого", і за допомогою її видаляються всі локальні дані, багато в чому подібно до того, як видаляються cookies-файли. (Насправді, в деяких браузерах система cookies та локальне сховище взаємопов'язані, так що єдиним способом видалити локальні дані буде видалення cookies.) А інші браузери можуть надавати користувачеві можливість перегляду даних для кожного окремого веб-сайту та видаляти дані вибраного сайту або сайтів.

Сховище даних сеансів

Використовує об'єкт sessionStorageдля тимчасового зберігання даних одного вікна або вкладки браузера. Ці дані доступні лише доти, доки користувач не закриє вікно або вкладку, після чого сеанс закінчується та дані видаляються. Але дані сеансу зберігаються, якщо користувач переходить на інший веб-сайт, а потім повертається назад за умови, що це відбувається у тому ж вікні браузера.

З точки зору коду веб-сторінки як локальне сховище, так і сховище даних сеансів працюють абсолютно однаково. Різниця полягає лише у тривалості зберігання даних.

Використання локального сховища надає найкращу можливістьдля збереження необхідної інформації для подальших відвідувань веб-сторінки користувачем. А сховище сеансів служить зберігання даних, які потрібно передавати від однієї сторінки інший. (У сховищі сеансів можна зберігати тимчасові дані, що використовуються лише на одній сторінці, але для цієї мети чудово працюють звичайні змінні JavaScript.)

Як локальне сховище, так і сховище сеансів пов'язані з доменом веб-сайту. Таким чином, якщо зберігати дані для сторінки www..html у локальному сховищі, ці дані будуть доступні для сторінки www..html, т.к. обидві ці сторінки мають той самий домен. Але ці дані не будуть доступні для сторінок інших доменів.

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

Хоча специфікація HTML5 не встановлює жодних жорстких правил щодо максимального обсягу сховища, більшість браузерів обмежують його 5 Мбайт. У цей обсяг можна запакувати багато даних, але його буде недостатньо, якщо ви хочете використовувати локальне сховище для оптимізації продуктивності та кешувати в ньому зображення або відео великого об'єму (і, правду кажучи, локальне сховище не призначене для таких цілей).

Для зберігання великого обсягу даних стандарт бази даних, що все ще розвивається. IndexedDBдопускає локальне зберігання набагато більшого обсягу - зазвичай 50 Мбайт для початку та більше, за згодою користувача.

Збереження даних

Перш ніж помістити фрагмент інформації до локального сховища або сховища сеансів, йому необхідно присвоїти описове ім'я. Це ім'я називається ключем (key) і потрібне для того, щоб дані можна було отримати в майбутньому.

Синтаксис для збереження фрагмента даних наступний:

localStorage = data;

// JS localStorage["username"] = "Ivan Petrov";

Звісно ж, зберігати фрагмент статичного тексту немає сенсу. Як правило, нам потрібно зберігати будь-які змінні дані, наприклад поточну датурезультат математичного обчислення або текстові дані, введені користувачем у поля форми. Далі наведено приклад збереження введених користувачем текстових даних:

Веб-сховище

Function saveData() ( // Отримуємо значення текстових полів var localData = document.getElementById("localData").value; var sessionData = document.getElementById("sessionData").value; // Зберігаємо текст, введений у текстовому полі, в локальному сховищі localStorage["localData"] = localData; // Зберігаємо текст, введений у текстовому полі, в сховищі сесій ["localData"]; var sessionData = sessionStorage["sessionData"]; // Відображаємо ці дані в текстових полях if (localData! = null) (document.getElementById("localData").value = localData; = null) ( document.getElementById("sessionData").value = sessionData; ) )

Сторінка містить два текстові поля: для локального сховища (зверху) та для сховища сеансів (знизу). Натискання кнопки "Зберегти" зберігає текст, введений у текстові поля, а натискання кнопки "Завантажити" виводить у полях відповідні збережені дані.

Веб-сховище також підтримує менш поширений синтаксис властивостей. Відповідно до правил цього синтаксису, ми звертаємося до осередку зберігання з ім'ям username як localStorage.username, а не localStorage["username"]. Обидва типи синтаксису є рівнозначними, і використання того чи іншого є питанням особистої переваги.

Веб-сховище не працює без веб-сервера

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

Ця особливість є побічним ефектомспособу, яким браузери виділяють місце у локальне сховище. Як раніше говорилося, браузери обмежують локальне сховище для кожного веб-сайту 5 Мбайт, для чого їм потрібно порівнювати кожну сторінку, яка хоче використовувати локальне сховище, з доменом сайту.

Що ж відбувається, якщо відкрити сторінку, яка використовує веб-сховище, з локального жорсткого диска? Все залежить від браузера. Браузер Internet Explorer, схоже, повністю втрачає підтримку веб-сховища. Об'єкти localStorage та sessionStorage зникають, і спроба використовувати їх викликає помилку JavaScript.

У браузер Firefoxоб'єкти localStorage і sessionStorage залишаються на місці і начебто підтримуються (навіть Modernizr визначає, що підтримуються), але все, що відправляється на зберігання, зникає невідомо куди. У браузері Chromeзнову ж таки щось інше - більша частина функціональності веб-сховища працює як слід, але деякі можливості (наприклад, подія onStorage) не працюють.

Подібні проблеми виникають з використанням інтерфейсу File API. Тому ви позбавите себе багатьох клопотів, якщо помістите тестовану сторінку на тестовий сервер, щоб уникнути всіх цих невизначеностей.

Підтримка веб-сховища браузерами

Веб-сховище є однією з найбільш підтримуваною можливістю HTML5 з гарним рівнем підтримки в кожному основному браузері. У таблиці нижче наведено мінімальні версії основних браузерів, які підтримують веб-сховище:

Всі ці браузери надають можливість локального сховища та сховища даних сеансу. Але для підтримки події onStorage потрібні пізніші версії браузерів, наприклад, IE 9, Firefox 4 або Chrome 6.

Найпроблемнішою є версія IE 7, яка не підтримує веб-сховище взагалі. Як обхідне рішення можна емулювати веб-сховище за допомогою файлів cookies. Це не зовсім ідеальне рішенняале воно працює. Хоча офіційного сценарію для закриття цього пропуску не існує, кілька хороших відправних точок можна знайти на сторінці HTML5 Cross Browser (у розділі "Web Storage").

Привіт всім! У цій статті ми розберемо, що таке 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там, де вам не потрібно спілкуватися з сервером, а потрібно зберігати дані локально у браузері у користувача. Все, що вам потрібно, ми розглянули в цій статті. Дякую за увагу і до швидкого!

Дуже часто першим додатком на JavaScript буває Todo-список, але проблема подібних програм у тому, що після оновлення сторінки всі пункти списку зникають.

Просте вирішення цієї проблеми – використання локально сховища(Local Storage). Локальне сховище дозволяє зберігати дані на машині користувача і ви легко зможете завантажити список із нього після оновлення сторінки. У цій статті ми напишемо невеликий todo-list із використанням локального сховища.

Що таке локальне сховище?

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

  • Local Storage: постійне сховище, саме його ми будемо використовувати
  • Session Storage: зберігає дані тільки цієї сесії, якщо користувач закриє сторінку, дані будуть втрачені.

Локальне сховище дозволяє зберігати на комп'ютері користувача дані у вигляді пар ключ-значення і ці дані будуть доступні навіть після закриття браузера або вимкнення комп'ютера.

HTML

Для створення todo-списку нам знадобиться:

  • Текстовий вхід для введення вмісту елемента.
  • Кнопка додавання елемента до списку.
  • Кнопка для чищення списку.
  • Сам список (
      ).
    • І додатковий div для показу помилок.

    Таким чином HTML розміткавиглядатиме так:

    Досить проста структура, яку ми оживимо за допомогою JavaScript.

    Т.к. ми використовуємо jQuery, необхідно додатково підключити її.

    JavaScript

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

    $("#add").click(function() ( var Description = $("#description").val(); if($("#description").val() == "") ( $( "#alert").html(" Warning! You left the empty"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; )

    Цей код перевіряє значення текстового input'а і, якщо воно порожнє - показує помилку і повертає false, щоб частина коду, що залишилася, не виконалася і елемент не додався до списку.

    // вставляємо запис $("#todos").prepend("

  • " + Description + "
    • // видаляємо все що залишилося в текстовому полі $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem("todos", todos); return false;));

    Для роботи з локальним сховищем необхідно надати ключ і відповідне значення. У нашому випадку назвемо ключ 'todos', а значенням буде весь HTML код, який міститься у списку (тег

      ). Цей код легко отримати з допомогою jQuery. І, нарешті, ми повертаємо false, щоб запобігти сабміт форми і не перезавантажувати сторінку.

      Наступний крок - перевірити локальне сховище, якщо є значення з ключем 'todos', то завантажити список з локального сховища:

      If (localStorage.getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); )

      Т.к. ми зберігаємо готовий HTML у сховищі, ми просто вставляємо цей код у список.

      Наш todo-list майже готовий, залишилося лише реалізувати функцію очищення списку. Коли користувач натисне кнопку буде видалено весь список і локальне сховище буде очищено:

      $("#clear").click(function() ( window.localStorage.clear(); location.reload(); return false; ));

      Готово! Повний код виглядає так:

      $(document).ready(function() ( $("#add").click(function() ( var Description = $("#description").val(); if ($("#description"))). val() == "") ( $("#alert").html(" Warning! You left the to-do empty"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; ) $("#todos").prepend("

    • " + Description + "
      • "); $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem("todos", todos); return false; )); .getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); ) $("#clear").click(function() ( window.localStorage.clear( );location.reload();

      Підтримка браузерами

      Веб сховище підтримують всі основні браузери, навіть IE8. Побоюватися варто лише IE7 та нижче.

      Висновок

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

Рубрика: Редактори
Поділитися