localStorage

Объект localStorage является глобальным объектом служит хранилищем данных. Разные браузеры предоставляют от 5 до 10 Мб под хранение данных (напомню, что куки могут содержать не более 4 кб). Вы можете записать в хранилище данные и управлять ими. Данные записываются в формате "ключ-значение".

Методы для работы с хранилищем.

setItem() — запись в хранилище
getItem() — получение данных из хранилища
removeItem() — удаление данных
key() - доступ к ключу
clear() — полная очистка хранилища

Количество ключей можно узнать через свойство length.


console.log(localStorage.length);

Все современные браузеры поддерживают локальное хранилище. Но вы дополнительно можете устроить небольшую проверку.


if(window["localStorage"]) {
	// поддерживает, можно писать свой код
}

Запишем данные.


localStorage.setItem('name', 'Барсик');
localStorage.setItem('name2', 'Васька');

Можно считать все данные из локального хранилища.


console.log(localStorage);

Но скорее всего, вы будете считывать конкретные ключи.


console.log(localStorage.getItem('name'));

Существуют альтернативные варианты.


console.log(localStorage['name']); // через массив

console.log(localStorage.name2); // через свойство

Если данные больше не нужны, можно удалить их по ключу.


localStorage.removeItem('name');

Если нужно полностью очистить хранилище, тогда вызывайте метод clear:


localStorage.clear();

Все ключи уникальны. Если вы будете вызывать метод setItem() несколько раз, используя один ключ, то данные будут перезаписываться и в итоге в ключе останется последняя запись.

Ключи и значения нужно записывать в строковых значениях. Если вам нужны числа, то используйте методы parseInt(), parseFloat() и т.д.

Сохраним число в виде строки. Затем преобразуем строку в число, увеличим на единицу и сохраним новое значение в том же ключе.


localStorage.setItem("numItem", "4");
var numItem = parseInt(localStorage.getItem("numItem"));
numItem++;
localStorage.setItem("numItem", numItem);

Метод key() бывает полезен при работе с массивами. Но можно получить и отдельный ключ.


localStorage.key(2);

Сохранять можно не только простую строку, но и объекты или массивы при помощи JSON.stringify().


//создадим объект
var cat = {
	age: 5,
	item2: [123, "two", 3.0],
	name:"Barsik"
};

var serialObj = JSON.stringify(cat); //сериализуем объект

localStorage.setItem("catKey", serialObj); //запишем в хранилище

var returnObj = JSON.parse(localStorage.getItem("catKey")); //спарсим обратно объект

Если вы превысите свой лимит, то разные браузеры по-разному поведут себя. Браузер может спросить у вас, хотите ли вы увеличить объём хранилища или сгенерировать исключение QUOTA_EXCEEDED_ERR, которое можно перехватить.


try {
	localStorage.setItem(myKey, myValue);
} catch(e) {
	if(e == QUOTA_EXCEEDED_ERR) {
		alert("Out of storage!");
	}
}

У каждого домена своё хранилище данных и нельзя просматривать содержимое хранилище другого домена.

localStorage

Реклама