<style>
#data, #fromEvent {
width: 400px;
height: 100px;
border: 1px solid #666;
margin: 50px auto 20px;
padding: 10px;
}
</style>
<div id="data" contenteditable="true"></div>
<div id="fromEvent"></div>
<button id="save">storage</button>
var addEvent = (function() {
if (document.addEventListener) {
return function(el, type, fn) {
if (el.length) {
for (var i = 0; i < el.length; i++) {
addEvent(el[i], type, fn);
}
} else {
el.addEventListener(type, fn, false);
}
};
} else {
return function(el, type, fn) {
if (el.length) {
for (var i = 0; i < el.length; i++) {
addEvent(el[i], type, fn);
}
} else {
el.attachEvent('on' + type,
function() {
return fn.call(el, window.event);
});
}
};
}
})();
var dataInput = document.getElementById('data'),
output = document.getElementById('fromEvent'),
save = document.getElementById('save');
addEvent(window, 'storage', function (event) {
if (event.key == 'storage-event-test') {
output.innerHTML ="key:"+event.key+" ---- old:"+event.oldValue+" ---- new:"+ event.newValue;
}
});
addEvent(save, 'click', function () {
localStorage.setItem('storage-event-test', dataInput.innerHTML);
});
网友评论