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 );
    }
    getData() {
        return this._data;
    }
    setData(data) {
        this._data = data
    }
    mergeToData(data) {
        for(let k in data) {
            this._data[k] = data[k]
        }
    }
    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.getData() );
        }
        else if(e.key == 'setMemoryStorage'){
            let data = JSON.parse(e.newValue);
            if( isEmptyObj(data) ){
                console.log('memory被清空了')
                memoryStorage.setData({});
            }else{
                console.log('memory被修正了')
                memoryStorage.mergeToData(data)
            }
        }
    })
    if( isEmptyObj(memoryStorage.data) ){
        MemoryStorage.dataGetHandler();
    }
    return memoryStorage;
}
function isEmptyObj(obj){
    for(let i in obj){
        return false;
    }
    return true;
}
export default initMemoryStorage;

援用此模塊並實行拿到的函數

import memory from 'multitabstorage'
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。

github地點

https://github.com/JhonMr/multitabstorage

npm引入

npm install multitabstorage