Pабота с localstorage: подписка на события, хранение функций, массивов и объектов

LocalStorage это локальное хранилище данных (key, value), расположенное на клиенте. Данные хранятся до того пока пользователь не очистит их принудительно (историю броузера) или с помощью JavaScript.

Работа с localStorage достаточна проста, данные хранятся в виде строк:

// Сохранение значения
localStorage.setItem(key, value)
localStorage[key] = value
// Получение значения
localStorage.getItem(key)
localStorage[key]
// Удаление значения
localStorage.removeItem(key)
delete localStorage[key]
// Очистка всего хранилища
localStorage.clear()

Самое интересное здесь событие window storage, которое генерируется при изменении значения элемента localStorage.

window.addEventListener('storage', function(events) {
    console.dir(events);
});

StorageEvent вызывается каждый раз, когда произошло изменение в localStorage. Это не работает на странице, которая вносит изменения, но срабатывает на открытых страницах домена в броузере. То есть, данное событие оповещает открытые вкладки одного сайта о произошедшем событии.

В целях изучения данной технологии мной был написан небольшой скрипт для демонстрации работы localStorage с вкладками броузера.

Попутно, для удобства, был добавлен функционал позволяющий расширить localStorage, хранить и извлекать из localStorage типы значений Null, Date, Number, Boolean, Function

Использование:

<script src="storage.js"></script>

Варианты установки значений

_storage('name', 'Ivan');
_storage('test', [1, 2, 3]);
_storage('obj', {van: 1, two: 2});
_storage('mydate', new Date);
_storage('fn', function(){
    alert('Hi');
};
var storage = _storage();
storage.set('name', 'Ivan');
storage
    .set('test', [1, 2, 3])
    .set('mydate', new Date)
    .set('obj', {van: 1, two: 2});

Варианты получения значений:

console.log(_storage('name')); // Ivan
console.dir(_storage('test')); // [1, 2, 3] type: [object Array]
console.dir(_storage('mydate')); // type: [object Date];
console.dir(_storage('fn')); // type: [object Function]
console.dir(_storage('obj')); // type: [object Object]
var storage = _storage();
alert(storage.get('name'));
_storage('fn')(); // call function
storage.get('fn')(); // call function

Подписаться на изменение значения:

 _storage().subscribe('message', function (value, e) {
     // value - new value
     // e - event object
 });

 var storage = _storage();
 storage.subscribe('message', function (value, e) {
    // value - new value
    // e - event object
}).subscribe('fn', function (fn, e) {
     fn(); //call function
    // fn - new value
    // e - event object
});

Проще один раз увидеть:

git clone https://github.com/Poznakomlus/localstorage.git
cd localstorage
npm install
node run.js

При этом у нас запустится сервер по адресу http://127.0.0.1:7777 и в браузере откроются две страницы этого сервера (Sender, Recipient) для подробной демонстрации описанного. Вы сможете передавать данные из страницы Sender странице Recipient.

Пользуйтесь на здоровье.

Автор: vlasenkofedor

Источник