同一个网站，两个标签页使用localStorage进行实时通信

现在手里的项目列表页和新增页是分开的两个页面，在列表页面上点击【新增】按钮会打开一个新的浏览器标签页，在新增页面添加完数据后又想要在列表页面有一个自动刷新的动作，以下代码完全可以实现以上的需求。

1. api/dataScreen.js 代码如下：

// 这个request是封装的Axios
import request from '@/uitils/request.js'

/**
 * 新增数据
 * 
 * @param data 表单数据
 */
export function add(data) {
    return request.post({
        url: '/data/screen',
        method: 'post',
        data
    })
}

以上代码就是封装了一下接口请求的东西，没啥可看的，主要是看下面这个vue代码。

2. dataFormDialog.vue（新增表单页面）

<template>
    <el-dialog>
        <!-- 此处代码省略 -->
    </el-dilaog>
</template>

<script>
import { add as addScreen } from '@/api/dataScreen'

export default {
    
    methods: {
           
        /**
         * 请求添加数据接口
         */
        doAdd() {
            addScreen(this.formData).then(resp => {
                if (resp.status === 'success') {
                    // 这一步代码很关键，就是往localStorage中存储一下当前时间，key可以理解为是一个通知标识
                    localStorage.setItem('addScreenSuccess', new Date().getTime().toString())
                }
            })
        }

    }

}
    
</script>

3. dataList.vue（数据列表页面）

<template>
    <el-table>
        <!-- 此处代码省略 -->
    </el-table>
</template>

<script>

import { pageSearch } from '@/api/dataScreen'   

export default {

    data() {
        return {
            // 表格数据
            tableData: []
        }
    },

    mounted() {
        // 重要代码：监听localStorage数据的变化，监听到addScreenSuccess的值变化后，就调用刷新数据接口
        window.addEventListener('storage', e => {
            if (e.key === 'addScreenSuccess') {
                this.onLoadTableData()
            }
        })
    },

    methods: {
        /**
         * 请求后台接口加载表格数据
         */
        onLoadTableData() {
            this.tableData = []

            pageSearch().then(resp => {
                if (resp.status === 'success') {
                    this.tableData = resp.data
                }
            })
        }
    }
}

</script>

以上的代码示例就是如何让两个标签页进行通信，在不适用websocket的情况下，我认为这样做效率最高了。但是有一点不好，那就是毕竟用到了IO操作嘛，如果频繁的进行IO操作可能会影响性能。如果还有其他的办法，欢迎大佬们评论留言，互相学习一下哈。