原创的跨页面传输数据

最新推荐文章于 2023-04-24 11:00:00 发布

原创最新推荐文章于 2023-04-24 11:00:00 发布 · 206 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

该博客详细介绍了如何在JavaScript中实现跨页面的数据传递和存储。通过在目标页面的js中创建一个window.open()来打开新页面，并在新页面加载完成后调用initCrossPageStorage函数初始化数据。同时，它利用自定义的cs-cpStorage元素和CrossPageStorage方法来存储和获取跨页面数据。这种方法允许在多个页面间共享和访问数据。


使用方式：
打开目标页面的js
var monitorWindow=window.open("../目标页面.html");
monitorWindow.onload=function(){
    var crossPageData=data;
    monitorWindow.initCrossPageStorage(crossPageData);
}

目标页面的设置

//封装简化跨页面数据，CrossPageStorage、crossPageData
$.extend({
    crossPageStorage:document.crossPageStorage,
    crossPageData:document.crossPageStorage.crossPageData
});

目标页面的js调用传来的数据

如果用jquery扩展了，就可以

var crossPageData = $.crossPageData;

否则

var crossPageData = document.crossPageStorage.crossPageData

crossPageStorage.js的内容：

(function(window){
    //给window.Element扩展一个函数,专门存储跨页面的数据
    window.Element.prototype.CrossPageStorage = function(value){
        var _this = this;
        var _dataName = 'crossPageData';
        var tagName=_this.tagName;
        if(tagName!=="CS-CPSTORAGE"){
            //如果标签元素不是"cs-cpStorage"，则不处理
            console.error("非CrossPageStorage的标签!")
            return this;
        }

        if(typeof(value) !== 'undefined'){
            _this[_dataName] = value;
            return this;
        }
        else{
            _this[_dataName]={};
            return this;
        }
    };
    //给window.Element扩展一个函数,可以更直接的获取跨页面数据
    window.Element.prototype.CrossPageData = this['crossPageData'];

    //在界面中插入cs-cpStorage自定义元素Element。并设置到document
    if(document.getElementsByTagName("cs-cpStorage").length===0){
        var cpStorage = document.createElement('cs-cpStorage');
        document.head.appendChild(cpStorage);
        document.crossPageStorage=cpStorage;
    }

    //初始化数据为空对象
    document.crossPageStorage.CrossPageStorage();
})(window)

/*
* 被跨页面的父窗口调用
* */
function initCrossPageStorage(data) {
    //console.info(data);
    document.crossPageStorage.CrossPageStorage(data);
    //console.info(document.crossPageStorage.crossPageData.xxxdata);
}