Локальне збереження файлів за допомогою веб-сховища (windows)
В продовження теми Читання локальних файлів цей розділ розповідає про локальному збереженні невеликих файлів за допомогою веб-сховища.
Примітка Для виконання пропонованих прикладів коду потрібно браузер, що підтримує API файлів і веб-сховище. наприклад Internet Explorer 10 або пізніша версія.
Додаток для малювання на полотні
Щоб наблизити наступні приклади коду до реальності, в першому прикладі взято нескладне додаток для малювання на основі полотна HTML5. Зрозуміло, що такі додатки вимагають локального збереження файлів. Надалі ми розширимо цей приклад, щоб локально зберегти створений малюнок.
Працювати в цьому додатку дуже легко - потрібно просто водити мишею по квадратній поверхні полотна. Щоб стерти намальоване, досить натиснути кнопку Erase (Очистити).
Мабуть, найбільш складним аспектом цього коду є дві "статичні" змінні, canvas і context. оголошені як локальні в init. Оскільки до них мають доступ локальні функції (paintCanvas і eraseCanvas), змінні доступні після завершення init. Завдяки цьому не загромождают глобальний простір імен. Зверніть увагу, що цей додаток працює і на сенсорних пристроях, таких як планшети.
Збереження файлів за допомогою веб-сховища
Як уже згадувалося вище, сучасні браузери (включаючи Windows Internet Explorer 9 і більш пізні версії) підтримують веб-сховище. Є два типи веб-сховища. локальне сховище і сховище сеансу. Як випливає з назви, сховище сеансу діє тільки для даного сеансу браузера. Локальна пам'ять діє протягом невизначеного терміну.
Щоб зберегти намальовану користувачем картинку, ми скористаємося локальним сховищем. Це цілком пересічна завдання, в чому ви можете переконатися на такому прикладі.
По суті, приклад 2 - це розгорнутий приклад 1.
Спочатку ми визначаємо всі необхідні можливості, які використовуються з функцією requiredFeaturesAvailable. Про всяк випадок ми використовуємо подвійне заперечення цікавлять нас об'єктів, щоб "привести" об'єкт до логічного значення.
Потім ми додаємо два нових обробника подій, saveCanvas і eraseCanvas. які викликаються натисканням кнопок Save (Збереження) і Load (Завантаження) відповідно. Функція saveCanvas складається з одного рядка:
Вона перетворює малюнок користувача в форму, придатну для відображення на веб-сторінці, а потім зберігає в локальному сховищі під призначеним для користувача ім'ям властивості canvasImage (будь-яке припустиме ім'я на ваш розсуд).
Щоб переконатися, що малюнок дійсно зберігається, створіть малюнок, клацніть Save. перезавантажте комп'ютер, знову запустіть приклад 2, а потім (будьте уважні: нічого бува не намалюйте на порожньому полотні) натисніть кнопку Load - і збережене зображення "дивним чином" з'явиться перед вами.
Зрозуміло, що в якості прикладу взято просте застосування для малювання. Як мінімум ви можете вдосконалити його, зробивши так, щоб користувачеві потрібно було спочатку клацнути на полотні, щоб приступити до малювання, а також замінити незграбні чотирикутники, чутливі до швидкості миші (покажчика), суміжно поточними лініями.
пов'язані теми
Показ: успадкувала Захищений
Чи була ця сторінка корисною? Та ні
1500 символів Якого залишилося
Дякуємо! Дякуємо за відгук. Ваша думка дуже важлива для нас.