（八）webStorage使用实例——利用storage事件实时监视webStorage中的数据

May的博客

于 2015-07-03 13:29:54 发布

阅读量3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Web前端大话HTML 文章标签： html5 webStorage storage事件

本文链接：https://blog.csdn.net/lmb55/article/details/46740643

通过HTML5的storage事件，可以监听并响应sessionStorage或localStorage中的数据变化。当数据被修改时，事件处理函数会接收到包含key、oldValue、newValue、url和storageArea属性的事件对象，从而实现跨页面数据同步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在HTML5中，可以通过window对象的storage事件进行监听并指定其事件处理函数的方法来定义当其在其他页面中修改sessionStorage或localStorage中的值时所要执行的处理，代码如下：

window.addEventListener('storage',function(){
            //当sessionStorage或localStorage中的值发生变动时所要执行的处理
        },false);

在事件处理函数中，触发事件的事件对象（event参数值）具有如下属性：

1、event.key属性：属性值为在sessionStorage或localStorage中被修改的数据键值；

2、event.oldValue属性：属性值为在sessionStorage或localStorage中被修改前的值；

3、event.newValue属性：属性值为在sessionStorage或localStorage中被修改后的值；

4、event.url属性：属性值为在sessionStorage或localStorage中值的页面URL地址；

5、event.storageArea属性：属性值为变动的sessionStorage对象或localStorage对象；

示例如下：

storage.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>利用storage事件实时监视webStorage中的数据</title>
    <script>
        window.addEventListener('storage',function

最低0.47元/天解锁文章

200万优质内容无限畅学