vue跨标签页共享sessionStorage

### 在`main.js` 或者全局路由钩子前面运行一次
```
function syncSessionStorage() {
    if (!sessionStorage.length) {
        // 这个调用能触发目标事件，从而达到共享数据的目的
        localStorage.setItem('getSessionStorage', Date.now())
    }
    // 该事件是核心
    window.addEventListener('storage', function (event) {
        if (event.key == 'getSessionStorage') {
            // 已存在的标签页会收到这个事件
            localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage))
            localStorage.removeItem('sessionStorage')
        } else if (event.key == 'sessionStorage' && !sessionStorage.length) {
            // 新开启的标签页会收到这个事件
            var data = JSON.parse(event.newValue)
            for (var key in data) {
                sessionStorage.setItem(key, data[key])
            }
            // 额外的触发赋值store操作
            const { content = {} } = JSON.parse(sessionStorage[keyName + "login_data"]) || {}
            store.commit('SET_ACCESS_TOKEN', content.access_token)
            store.commit('SET_REFRESH_TOKEN', content.refresh_token)
            store.commit('SET_EXPIRES_IN', content.expires_in)
            store.commit('SET_USER_INFO', content.user_info)
            store.commit('SET_PERMISSIONS', content.user_info.authorities || [])
            store.commit('CLEAR_LOCK')
            router.replace("/")
        }
    });
}
```

### 在`store.js`定义h5通用session缓存
```
import { validatenull } from '@/util/validate'
import website from '@/const/website'

const keyName = website.key + '-'
/**
 * 存储localStorage
 */
export const setStore = (params = {}) => {
    let {
        name,
        content,
        type
    } = params
    name = keyName + name
    const obj = {
        dataType: typeof (content),
        content: content,
        type: type,
        datetime: new Date().getTime()
    }

if (type) {
        window.sessionStorage.setItem(name, JSON.stringify(obj))
        const automaticLogonFlag = getStore({
            name: 'automaticLogon'
        }) || false
        if (automaticLogonFlag) {
            window.localStorage.setItem(name, JSON.stringify(obj))
        }
    } else {
        window.localStorage.setItem(name, JSON.stringify(obj))
    }
}
/**
 * 获取localStorage
 */

export const getStore = (params = {}) => {
    let {
        name,
        debug
    } = params
    name = keyName + name
    let obj = {}
    let content
    obj = window.sessionStorage.getItem(name)
    if (validatenull(obj)) obj = window.localStorage.getItem(name)
    if (validatenull(obj)) return
    try {
        obj = JSON.parse(obj)
    } catch (e) {
        return obj
    }
    if (debug) {
        return obj
    }
    if (obj.dataType === 'string') {
        content = obj.content
    } else if (obj.dataType === 'number') {
        content = Number(obj.content)
    } else if (obj.dataType === 'boolean') {
        content = eval(obj.content)
    } else if (obj.dataType === 'object') {
        content = obj.content
    }
    return content
}
/**
 * 删除localStorage
 */
export const removeStore = (params = {}) => {
    let {
        name,
        type
    } = params
    name = keyName + name
    if (type) {
        window.sessionStorage.removeItem(name)
    } else {
        window.localStorage.removeItem(name)
    }
}

/**
 * 获取全部localStorage
 */
export const getAllStore = (params = {}) => {
    const list = []
    const {
        type
    } = params
    if (type) {
        for (let i = 0; i <= window.sessionStorage.length; i++) {
            list.push({
                name: window.sessionStorage.key(i),
                content: getStore({
                    name: window.sessionStorage.key(i),
                    type: 'session'
                })
            })
        }
    } else {
        for (let i = 0; i <= window.localStorage.length; i++) {
            list.push({
                name: window.localStorage.key(i),
                content: getStore({
                    name: window.localStorage.key(i)
                })
            })
        }
    }
    return list
}

/**
 * 清空全部localStorage
 */
export const clearStore = (params = {}) => {
    const { type } = params
    if (type) {
        window.sessionStorage.clear()
    } else {
        window.localStorage.clear()
    }
}

```

### 在`vuex.state`里
```
 state: {
         automaticLogon: getStore({ // 自动登录开关
            name: 'automaticLogon'
        }) || null
 },
 actions: {
    login({ commit }, userInfo) {
        return new Promise((resolve, reject) => {
            loginByUsername(user.username, user.password, user.code, user.randomStr).then(response => {
                const data = response.data
                commit('SET_ACCESS_TOKEN', data.access_token)
                commit('SET_REFRESH_TOKEN', data.refresh_token)
                commit('SET_EXPIRES_IN', data.expires_in)
                commit('SET_USER_INFO', data.user_info)
                commit('SET_PERMISSIONS', data.user_info.authorities || [])
                commit('CLEAR_LOCK')
                setStore({
                    name: 'login_data',
                    content: data,
                    type: 'session'
                })
                resolve()
            }).catch(error => {
                reject(error)
            })
        })
    },
 },
 mutations: {
    SET_AUTOMATICLOGON: (state, flag) => {
        state.automaticLogon = flag
        setStore({
            name: 'automaticLogon',
            content: flag,
        })
    }
 }
```

Leanote's Blog

Navigation

Recent Posts

Friend Links