多页面共用sessionStorage的实现

发布时间:2019-08-19 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了多页面共用sessionStorage的实现脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
sessionStorage的局限:

  sessionStorage是页面级别的,仅在一个标签页生效,如果同一个浏览器同时打开多个标签页,且都访问同一个域名,sessionStorage是不会在这多个标签页共用的,即每个标签页都有自己的sessionStorage。
  如果想突破这种局限,实现多tab页共享存取数据同时又有sessionStorage暂存性的功能(关闭页面时存在里面的数据也消失的功能),则需要自己通过一些技巧实现手动维护多tab页面内存储某个对象的数据,就是目前我想要讲的方法。
  方法:通过给localStorage存储数据,可以在全浏览器内捕获一个storag的事件,然后再拿到该事件传过来的数据进行本地修改维护,多个tab页就以此通信,同步数据。

实现(es6 模块)
const MemoryStorage =  class {
    constructor(){
        this.data = {};
    }
    setITem(k, v){
        this.data[k] = v;
        MemoryStorage.dataSendHandler( this.data );
    }
    getItem(k){
        return this.data[k];
    }
    removeitem(k){
        delete this.data[k];
        MemoryStorage.dataSendHandler( this.data );
    }
    clear(){
        this.data = {};
        MemoryStorage.dataSendHandler( this.data );
    }
    static dataSendHandler( data ){
        localStorage.setItem('setMemoryStorage', JSON.stringify(data));
        localStorage.removeItem('setMemoryStorage');
    }
    static dataGetHandler(){
        localStorage.setItem('getMemoryStorage', new Date().getTime());
        localStorage.removeItem('getMemoryStorage');
    }
}
const initMemoryStorage = function(){
    VAR memoryStorage = new MemoryStorage();
    window.addEventListener('storage',function(e){
        if( e.newValue===null ) return false;
        if(e.key == 'getMemoryStorage'){
            console.LOG('有其他页面取memory')
            MemoryStorage.dataSendHandler( memoryStorage.data );
        }
        else if(e.key == 'setMemoryStorage'){
            let data = JSON.parse(e.newValue);
            if( iSEMptyObj(data) ){
                console.log('memory被清空了')
                memoryStorage.data = {};
            }else{
                console.log('memory被修改了')
                for(let k in data){
                    memoryStorage.data[k] = data[k];
                }
            }
        }
    })
    if( isEmptyObj(memoryStorage.data) ){
        MemoryStorage.dataGetHandler();
    }
}
function isEmptyObj(obj){
    for(let i in obj){
        return false;
    }
    return true;
}
export default initMemoryStorage;

引用此模块并执行拿到的函数

import memory From 'memory_storage'
window.memoryStorage = memory();

window.memoryStorage.setItem('Auth', 'as00f0e058585856d'); //存入Auth
var Auth = window.memoryStorage.getItem('Auth');           //获取Auth
window.memoryStorage.removeItem('Auth');                   //删除Auth
window.memoryStorage.clear();                              //清空storage

此时memoryStorage基本实现了sessionStorage的基础功能,setItem, getItem,removeItem,clear。

脚本宝典总结

以上是脚本宝典为你收集整理的多页面共用sessionStorage的实现全部内容,希望文章能够帮你解决多页面共用sessionStorage的实现所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。