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.

Пользуйтесь на здоровье.
ссылка на оригинал статьи https://habrahabr.ru/post/317586/