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

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

---

jQuery를 사용하여 HTML5 localStorage 변경 이벤트에 함수를 어떻게 바인딩합니까?

$(function () {

  $(window).bind('storage', function (e) {
    alert('storage changed');
  });

  localStorage.setItem('a', 'test');

});

위의 방법을 시도했지만 경고가 표시되지 않습니다.

업데이트 : Firefox 3.6에서 작동하지만 Chrome 8 또는 IE 8에서는 작동하지 않으므로 질문은 '모든 브라우저에서 jQuery를 사용하여 localStorage 변경 이벤트에 바인딩하는 방법'이어야합니다.

---

이것이 실제로 올바르게 작동하는 것으로 나타 났 으며 사양 을 잘못 해석 했습니다.

setItem (), removeItem () 및 clear () 메서드가 로컬 저장 영역과 연결된 Storage 개체 x에서 호출 될 때 메서드가 작업을 수행 한 경우 Window 개체의 localStorage 속성의 Storage 개체가 다음과 같은 모든 Document 개체에서 x가 아닌 동일한 저장 영역과 연관된 경우 저장 이벤트가 발생해야합니다.

즉, 개체 를 업데이트 하고 이벤트를 유발 한 항목을 제외한 모든 창 / 탭에서 저장소 이벤트가 localStorage발생합니다.

따라서 창 / 탭이 하나만 열려 있었기 때문에 이벤트가 시작되지 않았습니다. 위의 코드를 페이지에 배치하고 두 개의 탭에서 페이지를 열면 두 번째 탭에서 이벤트가 발생하는 것을 볼 수 있습니다.

문제에 대한이 답변 에는 자세한 내용이 포함되어 있습니다.

---

다음은 JQuery에서 수행하는 방법입니다.

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

e.key직접 액세스 는 작동하지 않습니다. 을 사용해야 e.originalEvent.key합니다.

일부 브라우저는 스토리지 알림을 다른 탭으로 만 보내고 일부는 그렇지 않습니다. (Firefox는 자체 탭으로 스토리지 이벤트를 보내지 만 keynull 로 설정하면 마치 것처럼 보입니다).

---

한 가지 언급 .setItem할 것은 항목이 실제로 변경 되는 경우 에만 이벤트 처리기가 호출된다는 것 입니다. 나는 당신이 같은 값으로 setItem을 계속 실행할 수 없다는 것을 깨달을 때까지 이것을 작동시키기 위해 내 머리카락을 찢어 냈습니다.

Chrome 버전 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)

---

set 또는 remove 메서드로 만든 키 값이 변경 될 때마다 항상 localDataStorage 와 같은 유틸리티를 사용 하여 동일한 창 / 탭에서 이벤트를 발생시킬 수 있습니다. 또한 배열, 부울, 날짜, 부동, 정수, Null, 개체 또는 문자열과 같은 "유형"을 투명하게 설정 / 가져 오기 위해 사용할 수도 있습니다.

[면책 조항] 나는 유틸리티의 작성자입니다. [/ 면책 조항]

유틸리티를 인스턴스화하면 다음 스 니펫을 사용하여 이벤트를 모니터링 할 수 있습니다 (jQuery 예제가 이미 제공되었으므로 vanilla JS에서).

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
);

참고 URL : https://stackoverflow.com/questions/4671852/how-to-bind-to-localstorage-change-event-using-jquery-for-all-browsers