Html5 local storage - блог вячеслава волкова

Можу припустити, що вже багато чули у нових можливостях html5. Однією з такою є localStorage. Говорячи простими словами - це клієнт-сайд база даних, яка дозволяє зберігати даних у формі «ключ - значення». Це досить зручно для збереження тимчасових даних користувачів.

На даний момент ця можливість підтримується більшістю сучасних браузерів: Safari 4+, Mobile Safari (iPhone / iPad), Firefox 3.5+, Internet Explorer 8+, Chrome 4+, Opera 10.6+. Далі я хотів би розповісти як використовувати це невелике зручність для ваших проектів.

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

Варто відмітити, що багато даних не вийде зберегти таким чином. Розмір локального сховища регулюється самим браузером і дорівнює приблизно 5-10Мб.

На відміну від cookie, дані можуть бути збережені на тривалий термін. Кожен домен і субдомен має свій об'єкт window.localStorage. Якщо у вас відкрито 2 вікна одного і того ж домена, то зміна вмісту localStorage відразу буде доступно на іншому вікні або вкладці.

Крім об'єкта window.localStorage існує елемент window.sessionStorage - являє собою сховище для користувача набору даних яке існує і актуально тільки для однієї вкладки браузера до тих пір, поки вона не буде закрита.

Тепер перейдемо безпосередньо до збереження, отримання та видалення даних.

Для збереження даних використовується наступний код:

Отримання даних з localStorage:

Що б дізнатися не перевищити ми ліміт допустимого розміру можна скористатися Слуда перевіркою

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

Таким чином в localStorage можна зберігати не тільки рядкові змінні, а й цілі об'єкти, наприклад,

Що б назад отримати JSON об'єкт можна скористатися методом JSON.parse ().

Матеріали використовувані для підготовки статті: