localStorage

window.localStorage - зберігання даних на локальному сховищі браузера.

Синтаксис:

window.localStorage

Параметри:

window - не обов'язково вказувати. Об'єкт window.

Опис:

localStorage об'єкт який є властивістю об'єкту window який дозволяє зберігати дані на локальному сховищі браузера.

localStorage аналогічний властивості  sessionStorage. Різниця тільки в тому, властивість sessionStorage зберігає дані протягом поточної сесії, на відміну від даних, які перебувають у властивості localStorage, які не мають обмежень за часом зберігання і можуть бути видалені за допомогою JavaScript або коли користувач видалить приватні дані у настойках браузера.

Об'єм даних localStorage для зберігання у локальному сховищі даних браузера є обмежений і зазвичай є не більше 5 Мб на домен. Якщо цей ліміт буде перевищено то виникне помилка QUOTA_EXCEEDED_ERR :

try { localStorage.setItem("test", "тест"); } catch(e){ // якщо перевищено ліміт if (e.name == "QUOTA_EXCEEDED_ERR") alert('QUOTA_EXCEEDED_ERR: localStorage перевищено допустимий ліміт'); else alert(e); }

За політикою безпеки браузера можна отримувати, змінювати, видаляти дані лише для поточного домену.

Не всі браузери підтримують.

Також можливо використовувати простіші способи:

if( window.localStorage ){ // додавання значення localStorage["key"] = "значення"; //отримання значення по ключу localStorage["key"]; }else alert(" localStorage не підтримує ваш браузер ");

Зверніть увагу що дані у локальному сховищі браузера зберігаються у вигляді рядка (String) тому усі інші типи даних при додавані перетворюються у рядок методом toString().

if( window.localStorage ){ localStorage.setItem('test', 4.5); alert(typeof localStorage['test']); }else alert(" localStorage не підтримує ваш браузер ");

Приклад:

if( window.localStorage ){ if(localStorage.getItem('data')==null){ localStorage.setItem('data',Date()); alert('Ви вперше у нас!'); }else alert('вперше відвідали сайт: '+localStorage.getItem('data')); }else alert(" localStorage не підтримує Ваш браузер ");

Так як localStorage зберігає лише дані у вигляді тексту (String) то для зберігання об'єкту JavaScript потрібно спочатку перетворити об'єкт у рядок, а для отримання навпаки рядок у об'єкт. Для цієї задачі ідеально підходить JSON:

if( window.localStorage ){ var obj = { js: "http://яваскрипт.укр/", mas: [1, 2, 3], dates : new Date()}; s = JSON.stringify(obj); localStorage.setItem("test", s); alert(localStorage["test"]); var resObj = JSON.parse(localStorage.getItem("test")); alert(resObj.js); }else alert(" localStorage не підтримує Ваш браузер ");

Приклад зберігання типів даних Number, Array, Date у localStorage і перетворення їх назад у відповідний тип надих:

if( window.localStorage ){ //Number //ціле число var n=2; localStorage.setItem('test', n); n=parseInt(localStorage.getItem('test')); //число з плаваючою крапкою n=2.5; localStorage.setItem('test', n); n=parseFloat(localStorage.getItem('test')); //Array mas=new Array(1, 3, "текст"); localStorage.setItem('test', mas); var newMas=localStorage.getItem('test').split(','); //Date var d=new Date(); localStorage.setItem('test', d.toJSON()); var d2=new Date(localStorage.getItem('test')); }else alert("localStorage не підтримує Ваш браузер");