Хранение данных в локальном хранилище браузера

Пользоваться cookies вы все умеете и прекрасно знаете что это такое. Сегодня рассмотрим "аналог" такого хранилища данных.
Речь пойдёт о localStorage и sessionStorage.

Почему вообще localStorage, а не обычные cookies?

Ну во-первых localStorage никогда не протухнет, как кука. Плюс он работает только на стороне браузера, следовательно работать он будет быстрее.
Также в браузерах нет(пока) настройки "отключить localStorage".
Но, конечно, не стоит забывать, что всё что на стороне клиента(в браузере) человек может удалить или исправить.

Разница между localStorage и sessionStorage

localStorage - работает всегда, даже если вы закрыли окно браузера
sessionStorage - работает пока вы не закрыли вкладку браузера.

Что в них можно хранить?

Да всё что угодно

А если быть более точным - то строки.
Например:

var myAccount = {  
  name: "vp-webdev",  
  rep: 72,  
  sp: 10000  
}

Сохранение

Теперь сохраним этот объект в локальном хранилище, предварительно сериализовав его:

localStorage.setItem('my_acc_data', JSON.stringify(myAccount));

Теперь можно заглянуть в отладчик в браузере и увидеть свой объект.

Считывание

Вот так мы получим сохранённые данные. Выведем в консоль "как есть" и в виде объекта.

var data = localStorage.getItem('my_acc_data');  
console.log(data);  
console.log(JSON.parse(data));

Удаление

localStorage.removeItem("my_acc_data");

Теперь, если вы заглянете в отладчик - переменной в хранилище не будет.

Полезные функции

Очистка хранилища:

localStorage.clear()

Проверка - поддерживает ли браузер данную технологию. Мало-ли, вдруг вы будете запускать свой код на холодильнике, кофеварке или на часах.

function lsSupport() {  
  try {  
    window.localStorage.setItem('tabTest', 'tabTest');  
    window.localStorage.removeItem('tabTest');  
    return true;  
  } catch (exception) {  
    return false;  
  }  
}

Код для полноценной работы с хранилищем

Я вынес всё буквально в несколько функций

var hasStorage = (function() {  
  try {  
    window.localStorage.setItem('tabTest', 'tabTest');  
    window.localStorage.removeItem('tabTest');  
    return true;  
  } catch (exception) {  
    return false;  
  }  
}());  
  
//удаление элемента
function removeStorage(name) {  
  if (hasStorage) {  
    window.localStorage.removeItem(name);  
  }  
}  
  
//сохранение элемента
function setStorage(name, value) {  
  if (hasStorage) {  
    window.localStorage.setItem(name, value);  
  }  
}  
  
//получение элемента
function getStorage(name) {  
  if (hasStorage) {  
    var value = window.localStorage.getItem(name);  
    return value;  
  }  
  return '';  
}

А как же sessionStorage?

Просто замените в коде localStorage на sessionStorage и всё.

Заключение

Я просто ещё раз напомню - доверять данным из локального хранилища нельзя. Если вы делаете авторизацию или оплату - всегда проверяйте данные пользователя на сервере, например с использованием сессий.

Описанный код работает на странице https://www.vp-golos.ml/test/local-storage.html
Исходники тут https://pastebin.com/HtcjD2LU