多页面共用sessionStorage的实现

jzman 发布于2019-08-05 14:17 / 3169人阅读

摘要：实现模块有其他页面取被清空了被修改了引用此模块并执行拿到的函数存入获取删除清空此时基本实现了的基础功能，，，，。

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

idc机房托管私有云 asp页面怎么实现的 Sessionstorage 实现判断页面多页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/57907.html

多页面共用sessionStorage的实现

摘要：实现模块有其他页面取被清空了被修改了引用此模块并执行拿到的函数存入获取删除清空此时基本实现了的基础功能，，，，。 sessionStorage的局限: sessionStorage是页面级别的，仅在一个标签页生效，如果同一个浏览器同时打开多个标签页，且都访问同一个域名，sessionStorage是不会在这多个标签页共用的，即每个标签页都有自己的sessionStorage。 ...

jeyhan 2019-08-22 18:26 评论0 收藏0
前端存储

摘要：前端存储简介一种在前端保存数据的思想。为了保证前端性能，一般不会保存大量数据。在手动删除前一直存在关闭当前页面后被清除可存放大小与服务器通信每次都在头部信息中。前端存储简介一种在前端保存数据的思想。第一次在页面中的保存数据，那么从第二次开始就可以使用了。可以使用的方法有： cookie localeStorage sessionStorage ie的userData web s...

luckyw 2019-08-22 16:01 评论0 收藏0
前端存储

摘要：前端存储简介一种在前端保存数据的思想。为了保证前端性能，一般不会保存大量数据。在手动删除前一直存在关闭当前页面后被清除可存放大小与服务器通信每次都在头部信息中。前端存储简介一种在前端保存数据的思想。第一次在页面中的保存数据，那么从第二次开始就可以使用了。可以使用的方法有： cookie localeStorage sessionStorage ie的userData web s...

binaryTree 2019-08-06 13:30 评论0 收藏0
前端存储

摘要：前端存储简介一种在前端保存数据的思想。为了保证前端性能，一般不会保存大量数据。在手动删除前一直存在关闭当前页面后被清除可存放大小与服务器通信每次都在头部信息中。前端存储简介一种在前端保存数据的思想。第一次在页面中的保存数据，那么从第二次开始就可以使用了。可以使用的方法有： cookie localeStorage sessionStorage ie的userData web s...

BenCHou 2019-08-05 13:26 评论0 收藏0
09.27 顺丰一面经历

摘要：算法题现在有一组数据，一组因子，利用公式可以得到一个结果。和只能存储字符串类型，对于复杂的对象可以使用提供的对象的和来处理应用场景用于组件之间的传值，，则主要用于不同页面之间的传值。例如表示数字到，表示匹配所有的大小写字母。 1. 算法题：现在有一组数据，一组因子a,b,c，利用公式 x*a+y*b+z*c可以得到一个结果。问怎样可以求出因子a,b,c对结果的影响？ 2. 介绍自己技术...

Baaaan 2019-08-23 12:23 评论0 收藏0