2

Здравствуйте. (Гугл облазила, но ничего дельного не нашла). Интересует такой вопрос: можно ли как-то отловить изменения в localStorage по определенному ключу в текущей вкладке. Находила, что можно только сообщать об изменениях соседним доменным вкладкам, но мне так не подходит. А цель вопроса: необходимо при изменении хранилища вытаскивать информацию с ключа и записать ее в базу.

Пробовала делать как-то так, но никакого результата при изменении хранилища не увидела. Скрипт добавляла в head.

window.addEventListener('storage', function(e) {  
  console.log(e.key);
});

3
  • Storage event Commented 14 апр. 2017 в 17:30
  • 1
    Разве storage event не срабатывает только в соседних вкладках?
    – Yumie
    Commented 14 апр. 2017 в 17:32
  • Нет, в текущей вкладке нельзя, и это описано в спецификации
    – Grundy
    Commented 14 апр. 2017 в 18:14

4 ответа 4

0

я думаю что это ужасное решение, но оно работает, возможно оно подтолкнет Вас к более удачному.

к сожалению мне пока ничего лучше в голову не пришло.

https://jsfiddle.net/fe0fjemu/

   setTimeout(() => localStorage.setItem('test', JSON.stringify('отвратитльный пример')), 1000);
setTimeout(() => localStorage.setItem('test', JSON.stringify('плохой код')), 5000);
setTimeout(() => localStorage.setItem('test', JSON.stringify('плохой код')), 8000);
let complexObject = {
    foo: [1, 2, 4, [12, 45], {bar: 1}],
  baz: {
    bon: {
        test: 'qwerty'
    }
  }
};
let complexObject2 = {
    foo: [1, 2, 4, [12, 45], {bar: 1}],
  baz: {
    bon: {
        test: 'qwert'
    }
  }
};
setTimeout(() => localStorage.setItem('test', JSON.stringify(complexObject)), 15000);
setTimeout(() => localStorage.setItem('test', JSON.stringify(complexObject2)), 18000);

let storeValue = '';
const storageListner = setInterval(() => {
    let newValue = localStorage.getItem('test');
    if (localStorage.getItem('test') && storeValue !== newValue) {
        storeValue = newValue;
        console.log(storeValue);
    }
}, 1000);
3
  • Большое спасибо за ответ в любом случае. Мною было принято решение получать значение ключа при каждом нажатии на кнопку, которая и изменяет localStorage. По сути это корзина с товарами, которая изменяется при добавлении, удалении товаров из нее.
    – Yumie
    Commented 16 апр. 2017 в 8:07
  • 1
    @Yumie И это правильно. Ведь некое событие запускает сценарий добавления товара в корзину. Значит, остаётся передать функцию обратного вызова для этого события.
    – YozhEzhi
    Commented 16 апр. 2017 в 10:18
  • @Yumie что бы не писать в каждом месте отдельно, можно сделать обёртку, функцию, с помощью которой будут сетаться значения в локалстор. А так как, мы сетаем значения через неё, то можно и вызывать тех кто подписался на обновления. Commented 1 мая 2019 в 12:49
0

Для Ангуляра нашла такой выход,также можно куда-угодно прилепить используя библиотеку RxJS:

export class LocalStorageService {
  private productsInCart: Array<any> = JSON.parse(localStorage.getItem('productsInCart')) || {};
  public order$ = new BehaviorSubject(this.productsInCart);
  //пример функции,после которой мне нужно пропихнуть новое значение 
    unsetLSS(id: string){
    delete this.productsInCart[id];
    localStorage.setItem('productsInCart', JSON.stringify(this.productsInCart));
     
     //именно эта строка делает событие
    this.order$.next(this.productsInCart);
    
  }
  
  }
  
   //в той компоненте которая мне нужна
   
   order$ = this.LSS.order$;
   cartProducts: Product[] = [] ; //переменная куда я вставляю значение,этот массив я вывожу потом
   
    constructor(
    private LSS: LocalStorageService
  ){}
      ngOnInit() {
     
      this.order$.subscribe((value) => {
        this.cartProducts = value;
      });

0

В сниппете не работает из-за песочницы, но вообще вроде всё хорошо:

function changed(key) {
  console.log('changed', key, localStorage.getItem(key))
}

for (let key in localStorage) {
  if (typeof localStorage[key] === 'function') {
    let old = localStorage[key].bind(localStorage)

    localStorage[key] = function (...args) {
      var res = old(...args)
      key === 'setItem' && Promise.resolve(args[0]).then(changed)
      return res
    }
  }
}

Object.defineProperty(window, 'localStorage', {
  value: new Proxy(localStorage, {
    set(target, key, val, receiver) {
      target[key] = val
      Promise.resolve(key).then(changed)
      return true
    }
  })
})
-2

Используйте

window.addEventListener('storage', function(e) { }

из https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

1
  • данное событие реагирует на изменение localStorage в соседних вкладках, а в вопросе речь шла про текущую.
    – Grundy
    Commented 30 нояб. 2019 в 22:53

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.