Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "HTML 5 local storage compatibility and storage monitoring example analysis". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

I. compatibility of localStorge onstorage events

1. Trigger condition

IE8/IE9/Firefox3.6: register the onstorage event in page A, and when you modify the localStorage, page An and other pages will receive the onstorage event. Therefore, when listening to onstorage for these browsers, you need to determine whether it is triggered by this page, and ignore the behavior triggered by this page.

Only onstorage events triggered by other pages are received in the Chrome12/Firefox4/Opera11/Safari5.

In addition, tests in the Chrome14 DEV version found that the onstorage event will not be triggered anyway after the page has set document.domain, which makes it impossible to use the onstorage event under Chrome.

two。 Event registration

IE needs to be registered on document, others are registered on window.

JavaScript Code copies content to the clipboard

/ / IE registered on document if (document.attachEvent & &! K.Browser.opera) {document.attachEvent ("onstorage", _ onstorage (key,callback));} / / other registered on window else {window.addEventListener ("storage", _ onstorage (key,callback), false);}

3. Event object

The storageEvent object in IE does not contain attributes such as key/newValue/oldValue, so if you want to know which Key's data has changed, other browsers can get the data directly.

4. Data acquisition

Under IE9, the value of the corresponding key cannot be obtained immediately when the event is triggered, so you need to use setTimeout for asynchronous processing. Other browsers are in good condition.

Second, monitor the changes of a certain Key

Monitoring a key is more refined on the basis of onstorage, which is the basis of subsequent applications. The following is the implementation scheme:

1. When onstorage is available, listen for the event and determine whether the specified key is triggered when the event is triggered.

2. Use Timer to check when onstorage is not available (below IE8, Chrome due to domain problem)

JavaScript Code copies content to the clipboard

Var LocalStorage = (function () {var ls = window.localStorage; function _ onstorage (key, callback) {var oldValue = ls [key] / * under IE, even if the current page triggers data changes, the current page will receive onstorage events, while other browsers will only receive * / return function (e) {/ / IE without using setTimeout to get the changed value. SetTimeout (function () {e = e) | | window.storageEvent; var tKey = e.key, newValue = e.newValue The key attribute is not supported under IE, so it is necessary to judge whether the data in key has changed according to the data in storage. If (! tKey) {var nv = ls [key]; if (nv! = oldValue) {tKey = key; newValue = nv }} if (tKey = = key) {callback & & callback (newValue); oldValue = newValue;}, 0) }} return {getItem: function (key) {return ls.getItem (key);}, setItem: function (key, val) {return ls.setItem (key, val) }, removeItem: function (key, val) {return ls.removeItem (key);}, clear: function () {return ls.clear () }, onstorage: function (key, callback) {/ / IE6/IE7/Chrome checks for updates using Timer Others using onstorage event / * Chrome (14.0.794.0) to rewrite document.domain will cause onstorage not to trigger. In view of the compatibility problem of onstorage, do not use onstorage event temporarily, use the traditional polling method to check for data changes * / var b = K.Browser If (! this.useTimer) {/ / IE is registered on document if (document.attachEvent & &! K.Browser.opera) {document.attachEvent ("onstorage", _ onstorage (key,callback)) } / / other else {window.addEventListener ("storage", _ onstorage (key,callback), false) registered on window;} } else {/ * Timer check method * / var listener = _ onstorage (key, callback); setInterval (function () {listener ({})) }, this.interval) }}, / / whether to use Timer to check useTimer: (K.Browser.ie & & K.Browser.ie < 8) | | (K.Browser.chrome), / / the time interval to check whether the storage has changed interval: 1000};}) () This is the end of the content of "HTML 5 Local Storage compatibility and Storage Monitoring example Analysis". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.