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);
}

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

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

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

localStorage.key() - ім'я ключа за його індексом.
localStorage.getItem() - поверне значення ключа.
localStorage.setItem() - додає значення або оновлює якщо ключ вже існує.
localStorage.removeItem() - видаляє елемент за назвою ключа.
localStorage.clear() - очищає локальне сховище даних браузера.

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

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 не підтримує Ваш браузер");