[JQUERY] 모든 브라우저에 jQuery를 사용하여 LocalStorage 변경 이벤트에 바인딩하는 방법은 무엇입니까?

모든 브라우저에 jQuery를 사용하여 LocalStorage 변경 이벤트에 바인딩하는 방법은 무엇입니까?

해결법

1. ---

   1.이것이 실제로 올바르게 작동하고 사양을 잘못 해석하고 있다는 것이 밝혀졌습니다.

   이것이 실제로 올바르게 작동하고 사양을 잘못 해석하고 있다는 것이 밝혀졌습니다.

   즉, LocalStorage 객체를 업데이트하고 이벤트를 일으킨 것을 제외하고 모든 창 / 탭에서 저장 이벤트가 시작됩니다.

   그래서 이벤트는 창 / 탭이 열려 있기 때문에 해고되지 않았습니다. 위의 코드를 페이지에 배치하고 두 개의 탭에서 페이지를 열면 두 번째 탭에서 실행되는 이벤트가 표시됩니다.

   이 문제에 대한이 답변에는 세부 사항이 있습니다.

2. ---

   2.jQuery에서 그것을하는 방법은 다음과 같습니다.

   jQuery에서 그것을하는 방법은 다음과 같습니다.

    $(window).bind('storage', function (e) {
        console.log(e.originalEvent.key, e.originalEvent.newValue);
    });
   

   E.Key에 직접 액세스하지 않습니다. e.originalevent.key를 사용해야합니다.

   일부 브라우저는 다른 탭에만 스토리지 알림을 보낼 수 있으며 일부는하지 않습니다. (Firefox는 스토리지 이벤트를 자체 탭으로 보내지 만 null로 설정된 키로 사용됩니다).

3. ---

   3.언급 할 한 가지는 이벤트 핸들러가 실제로 항목이 변경되면 .setItem에서만 호출되는 것입니다. 나는 이것을 실현 할 때까지 이것을 얻으려고 노력하고 있기 때문에 나는이 머리카락을 찢어 버렸다.

   언급 할 한 가지는 이벤트 핸들러가 실제로 항목이 변경되면 .setItem에서만 호출되는 것입니다. 나는 이것을 실현 할 때까지 이것을 얻으려고 노력하고 있기 때문에 나는이 머리카락을 찢어 버렸다.

   나는 크롬 버전 54.0.2840.71 M.에있다

   다음은 테스트가 있습니다 (두 개의 브라우저 탭에서 이것을 엽니 다).

   if (window.addEventListener)
               addEventListener('storage', storage_event, false);
           else if (window.attachEvent)
               attachEvent('onstorage', storage_event, false);
           function storage_event(e) {
               console.log("Time is now "+ e.newValue);
           }
   
           setInterval(function () {
               var time=new Date().getTime();
               localStorage.setItem("time", time);
               console.log("Setting time to "+time);
           }, 1000)
   

4. ---

   4.LocalDataStorage와 같은 유틸리티를 사용하여 설정 또는 제거 메소드가 만든 키 값이 변경 될 때마다 동일한 창 / 탭에서 이벤트를 실행할 수 있습니다. 또한 투명하게 설정하여 배열, 부울, 날짜, float, 정수, null, 객체 또는 문자열을 투자 적으로 설정 / 가져 오기도 가능합니다.

   LocalDataStorage와 같은 유틸리티를 사용하여 설정 또는 제거 메소드가 만든 키 값이 변경 될 때마다 동일한 창 / 탭에서 이벤트를 실행할 수 있습니다. 또한 투명하게 설정하여 배열, 부울, 날짜, float, 정수, null, 객체 또는 문자열을 투자 적으로 설정 / 가져 오기도 가능합니다.

   [면책 조항] 나는 유틸리티의 저자 [/ Disclaimer]

   유틸리티를 인스턴스화하면 다음 스 니펫을 사용하여 jQuery 예제가 이미 주어진 이벤트를 모니터링 할 수 있습니다.

   function localStorageChangeEvents( e ) {
       console.log(
           "timestamp: "     + e.detail.timestamp + " (" + new Date( e.detail.timestamp ) + ")" + "\n" +
           "key: "           + e.detail.key     + "\n" +
           "old value: "     + e.detail.oldval  + "\n" +
           "new value: "     + e.detail.newval  + "\n"
       );
   };
   document.addEventListener(
       "localDataStorage"
       , localStorageChangeEvents
       , false
   );
   

from https://stackoverflow.com/questions/4671852/how-to-bind-to-localstorage-change-event-using-jquery-for-all-browsers by cc-by-sa and MIT license