Tại sao Internet Explorer kích hoạt sự kiện "lưu trữ" cửa sổ trên cửa sổ lưu trữ dữ liệu?

Question

Internet Explorer 10 kích hoạt sự kiện "lưu trữ" cửa sổ trên cùng một cửa sổ được lưu trữ vào bộ nhớ cục bộ.

Có vẻ như các trình duyệt khác chỉ kích hoạt sự kiện trên tất cả các cửa sổ khác, vì vậy tôi không phải lo lắng về một cửa sổ đang lắng nghe các sự kiện lưu trữ phản ứng với lưu trữ của riêng nó. Tại sao IE kích hoạt sự kiện trong cửa sổ sai, và làm thế nào tôi có thể sao chép hành vi chuẩn trong IE?

Answer 1

Microsoft có vẻ là ý thức về vấn đề này, nhưng nó không giống như họ sẽ sửa chữa nó bất cứ lúc nào sớm: https://connect.microsoft.com/IE/feedback/details/774798/localstorage-event-fired-in-source-window

Một lựa chọn là bạn có thể thiết kế các thính giả và setters của bạn để họ không phản ứng hoặc lưu trữ khi họ nhận thông tin từ sự kiện lưu trữ đã phù hợp với trạng thái của họ. Tuy nhiên, mẫu thiết kế này có thể khó khăn hơn việc dựa vào sự kiện lưu trữ chỉ kích hoạt trên các cửa sổ khác.

Một tùy chọn khác là làm cho lưu trữ cục bộ hoạt động theo cùng một cách trong IE mà nó hoạt động trong các trình duyệt khác. Tôi đã đưa ra một giải pháp được thừa nhận nhưng có chức năng mà tôi đã thử nghiệm trong IE10 và dự kiến ​​sẽ làm việc trong IE8 và IE9. Các thành phần javascript của tôi không nghe sự kiện "lưu trữ" cửa sổ trực tiếp mà thay vào đó hãy nghe một "bộ điều phối sự kiện" mà tôi đã tạo. Trình điều phối sự kiện lắng nghe sự kiện "lưu trữ" cửa sổ và kích hoạt sự kiện xương sống KHÔNG CHẤP NHẬN sự kiện lưu trữ có nguồn gốc trong cửa sổ đó. Con đường tôi kiểm tra nếu cửa sổ này được lưu trữ giá trị này là bằng cách sử dụng một phương pháp tùy chỉnh cho gọi SetItem() tạo ra một ID duy nhất cho giá trị và theo dõi nó, như thế này:

eventDispatcher.set = function(key, value) { 
    var storageId = (new Date()).getTime(); 
    eventDispatcher.idList.push(storageId); 
    localStorage.setItem(key, {value: value, id: storageId}); 
} 

Và EventDispatcher tôi lắng nghe sự kiện lưu trữ và gây nên một sự kiện chỉ khi danh sách các ID nó tạo ra không chứa ID của giá trị này, như thế này:

$(window).on('storage', dispatchStorageEvent); 
function dispatchStorageEvent(event) { 
    var newValue = JSON.parse(event.originalEvent.newValue); 
    if (eventDispatcher.idList.indexOf(newValue['id']) > -1) { 
    return; 
    } 
    eventDispatcher.trigger("storageEvent:" + event.originalEvent.key, newValue['value']); 
} 

có một chút mã bạn có thể thêm vào giữ idList ngắn và để tạo ra nó như là một mảng trống ở nơi đầu tiên, nhưng tôi đã bỏ nó ra vì lợi ích của sự rõ ràng. Tạo một eventDispatcher để xử lý các sự kiện lưu trữ là một chút chi phí, nhưng nó có thể làm cho sự phát triển của bạn nhất quán giữa các trình duyệt. Một giải pháp ít hack hơn sẽ sử dụng cơ chế khóa và xếp hàng thích hợp, nhưng điều đó có thể rất khó khăn.