H5 storage事件
H5 storage事件
代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
H5 storage事件
代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="header">
</div>
<div class="demo">
<p><label for="data">Your test data:</label> <input type="text" name="data" value="" placeholder="change me" id="data" /><input type="button" value="保存localStorage数据" id="save"/></p>
<p id="fromEvent">Waiting for data via <code>storage</code> event...</p>
</div>
</div>
<script type="text/javascript">
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 (el, );
});
}
};
}
})();
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:"++" ---- new:"+ ;
}
});
addEvent(save, 'click', function () {
localStorage.setItem('storage-event-test', dataInput.value);
});
</script>
</body>
</html>HTML5提供一个storage事件，当setItem()、removeItem()或者clear()方法被调用，并且数据真的发生了改变时，storage事件就会被触发。注意，只有数据真的发生了变化，才会触发storage事件。也就是说，如果当前的存储区域是空的，调用clear()是不会触发事件的。或者通过setItem()来设置一个与现有值相同的值，storage事件也是不会被触发的torage事件的
Event对象包含如下属性：
storageArea，表示存储类型（localstorage或sessitorage）；
key，发生改变的项的key
oldValue，发生改变的项的原值
newValue，发生改变的项的新值
url， key改变发生的URL
必须将文件上传到Web服务器上（或者localhost），才支持storage事件。
不同浏览器对storage事件的支持情况不同。经测试，Internet Explorer 9可以在当前页面中接收到storage事件，而在firefox和chrome中，必须同时打开两个窗口浏览【例10-5】，在其中一个窗口中单击按钮，在另一个窗口会接收到storage事件。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2022-0-09，如有侵权请联系 cloudcommunity@tencent 删除数据存储elstorage事件#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格
上传时间： 2025-07-28 02:30:34
上一篇：Typora 的下载与破解指南
下一篇：HTML5 Web Worker
| 留言与评论（共有 7 条评论） |
| 本站网友 44xpxp | 17分钟前 发表 |
| 'click' | |
| 本站网友 贵新隧道 | 28分钟前 发表 |
| 原始发表：2022-0-09 | |
| 本站网友 独立团论坛 | 21分钟前 发表 |
| 原始发表：2022-0-09 | |
| 本站网友 苏宁易购广告 | 12分钟前 发表 |
| 才支持storage事件 | |
| 本站网友 移动上网 | 1分钟前 发表 |
| fn); } } else { el.addEventListener(type | |
| 本站网友 宇宙之王 | 7分钟前 发表 |
| ); }); } }; } })(); var dataInput = document.getElementById('data') | |