SAPID INFO

LocalStorage как альтернатива cookie

Хранятся данные также, как и в cookie — ключ:значение. Задаем новое значение:

localStorage.setItem('ключ', 'значение');

Объект localStorage и метод setItem (передаем ключ и значение).

Получаем значение:

var value = localStorage.getItem('ключ');

Результат: в переменную value помещается значение, хранимое под передаваемым через метод getItem ключом.

Удаляем данные:

localStorage.removeItem(‘ключ’); // удаляем конкретный ключ
localStorage.clear(); // полностью чистим локальное хранилище

Сохраняем сложный объект в LocalStorage:

var data = {
  data1: "Значение",
  data2: "Значение",
  data3: "Значение"
  //...
}
localStorage.setItem("Ключ", JSON.stringify(data));

Получаем значение сложного объекта:

var data = {};
if (localStorage.getItem("Ключ")) {
  data = JSON.parse(localStorage.getItem("Ключ"));
}

Пример использования в магазине:

// товар, который просматривает пользователь в магазине
var viewItem = {
  id: "5456098",
  name: "Смартфон LG G4",
  dateView: new Date() // дата просмотра товара в интернет-магазине
};
// сохраняем, просматриваемый в данный момент пользователем товар в хранилище
localStorage.setItem (viewItem.id, JSON.stringify(viewItem));
 
// удаляем старые записи
var key, value;
// перебираем все данные в хранилище
for (var i=0; i<localStorage.length; i++) {
  //получаем ключ записи
  key = localStorage.key(i);
  //получаем по ключу объект
  value = JSON.parse(localStorage.getItem(key));
  // если с момента просмотра товара прошло более чем 30 дней, то удаляем данную запись
  if (Date.parse(value.dateView) < (new Date() - 1000*60*60*24*30)) {
    localStorage.removeItem(key);
  }
}

Пример использования основных запросов

<!-- здесь будет выводиться основная информация -->
<input type="text" id="input_text" value="" />
<span id="span_text"></span>

<script>
// задаем значение параметра
localStorage.setItem('key', '911');
// получаем параметр в переменную value
var value = localStorage.getItem('key');
// выводим во всплывающем окне
alert (value);
// выводим в интпуте
document.getElementById('input_text').value = value;
// выводим в спане (просто текстом
document.getElementById('span_text').innerHTML = value;
</script>

 

 


Комментарии к статье
Добавьте свой комментарий - оставьте след в блоге!

Вы должны войти на сайт.