本代码简单地分享利用window.name实现浏览器端数据存储： 
1、在同一个页面一个地方设置window.name = "abc"，另外一个地方读取window.name，自然能得到"abc"，这个很简单就不举例了 
2、利用window.name实现页面跨域交互：demo.html是主页面，proxy.html是一个空的HTML文件（由于OSC不允许不输入任何代码，所以这里加了个空script），这两个文件都在同一个域下；remote.html是另外某个域下的文件 
代码中有这么两处设置： 
     frame.contentWindow.location = self.cfg.proxyUrl;
     和
     frame.src=url;
这里说明下：
     第一处设置是为了设置当前页面地址栏显示的URL（这样浏览器历史记录中也存的是这个），它是一个站内URL
     第二处设置是为了让iframe显示的文档来自远程页面
​1.图片
​
​2. [代码]demo.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>window.name实现跨域主页面</title>
    </head>
    <body>
        <button id="getDataBt">获取数据</button>
        <div id="result"></div>
        <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
        <script>
            $(function() {
                dataRequest = {
                    _doc : document,
                    cfg: {
                        proxUrl: 'proxy.html'  // proxy.html是一个空文件
                    }
                };
                 
                dataRequest.send = function(url, callback) {
                    if(!url || typeof url !== "string") {
                        return;
                    }
                     
                    var frame = this._doc.createElement("iframe"), state = 0, self = this;
                    this._doc.body.appendChild(frame);
                    frame.style.display = "none";
                     
                    var clear = function() {
                        try {http://www.huiyi8.com/qzone/​
                            frame.contentWindow.document.write('');
                            frame.contentWindow.close();
                            self._doc.body.removeChild(frame);
                        }QQ空间背景
                        catch(e) {
                             
                        }
                    };
                     
                    var getData = function() {
                        try {
                            var data = frame.contentWindow.name;
                        }
                        catch(e) {
                             
                        }
                         
                        clear();
                         
                        if(callback && typeof callback === "function") {
                            callback(data);
                        }
                    };
                     
                    $(frame).load(function() {
                        if(state === 1) {
                            getData();
                        }
                        else if(state === 0) {
                            state = 1;
                            frame.contentWindow.location = self.cfg.proxyUrl;
                        }
                    });
                    frame.src = url;   // 设置frame的src属性为远程页面的URL
                };
                 
                var testUrl = 'remote.html?' + new Date().getTime();
                 
                $("#getDataBt").click(
                    function() {
                        dataRequest.send(testUrl, function(result) {
                            $("#result").html(result);
                        });
                    }
                );
            });
        </script>
    </body>
</html>
3. [代码]proxy.html

<script type="text/javascript">
   //
</script>
4. [代码]remote.html    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>远程页面</title>
    </head>
    <body>
        <div id="content">
            我是远程数据，来自remote.html！
        </div>
    </body>
    <script type="text/javascript">
        window.name = document.getElementById("content").innerHTML;
    </script>
</html>
​

window.name应用于浏览器端数据存储的更多相关文章

  1. Web Storage：浏览器端数据储存机制

    目录 概述 操作方法 存入/读取数据 清除数据 遍历操作 storage事件 参考链接 概述 这个API的作用是,使得网页可以在浏览器端储存数据.它分成两类:sessionStorage和localS ...

  2. 浏览器本地数据存储解决方案以及cookie的坑

    本地数据存储解决方案以及cookie的坑 问题: cookie过长导致页面打开失败 背景: 在公司的项目中有一个需求是打开多个工单即在同一个页面中打开了多个tab(iframe),但是需要在刷新时只刷 ...

  3. JS中浏览器的数据存储机制

    一.JS中的三种数据存储方式 cookie.sessionStorage.localStorage 二.cookie 1.cookie的定义: cookie是存储在浏览器上的一小段数据,用来记录某些当 ...

  4. JavaScript浏览器本地数据存储

    浏览器本地存储主要使用的是sessionStorage和localStorage.两者都支持,sessionStorage保存的是浏览器和服务器的一次对话信息,只在一次回话中有效.当在新标签页或新窗口 ...

  5. 常见的浏览器端的存储技术：cookie

    工作原理: cookie是存在用户硬盘中,用户每次访问站点时,Web应用程序都可以读取Cookie包含的信息.当用户再次访问这个站点时,浏览器就会在本地硬盘上查找与该 URL 相关联的 Cookie. ...

  6. 仿Redis用来作前端浏览器的数据存储结构

    用js写了一个类似redis存储结构的类库,目前只有的存储类型只有hash.set两个, 还没测试过性能,欢迎各位猿友能够帮我指出程序代码的缺陷, 后期有时间会完善其他几个类型的存储结构. /**** ...

  7. HTML 5浏览器端数据库

    HTML 5浏览器端数据库为什么要使用浏览器端数据库:随着浏览器处理能力的增强,越来越多的双喜鸟网站开始考虑在客户端存储大量的数据,这可以减少用户从服务器获取数据的等待时间. 1.本地存储-本地存储可 ...

  8. html5 浏览器端数据库

    为什么使用浏览器端数据库:随着浏览器的处理能力不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少用户等待从服务器获取数据的时间. 一.localStorage  — 本地存储  可 ...

  9. 浏览器端-W3School-Browser：Window 对象

    ylbtech-浏览器端-W3School-Browser:Window 对象 1.返回顶部 1. Window 对象 Window 对象 Window 对象表示浏览器中打开的窗口. 如果文档包含框架 ...

随机推荐

  1. 程序自动分析(codevs 4600)

    题目描述 Description 在实现程序自动分析的过程中,常常需要判定一些约束条件是否能被同时满足. 考虑一个约束满足问题的简化版本:假设x1,x2,x3,…代表程序中出现的变量,给定n个形如xi ...

  2. nosql整理

    Nosql: Redis,Memcache,MongoDB,Hbase,Couchbase  LevelDB https://www.cnblogs.com/lina520/p/7919551.htm ...

  3. CSS 选择器语法参考手册

    转自:http://www.w3school.com.cn/cssref/css_selectors.asp CSS3 选择器 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. &quo ...

  4. T2639 约会计划 codevs

    http://codevs.cn/problem/2639/ 题目描述 Description cc是个超级帅哥,口才又好,rp极高(这句话似乎降rp),又非常的幽默,所以很多mm都跟他关系不错.然而 ...

  5. P2136 拉近距离（spfa判负环）

    洛谷—— P2136 拉近距离 题目背景 我是源点,你是终点.我们之间有负权环. ——小明 题目描述 在小明和小红的生活中,有N个关键的节点.有M个事件,记为一个三元组(Si,Ti,Wi),表示从节点 ...

  6. Hbase优化总结

    1.JVM参数优化: –Xmn=12G –Xms=24G  -Xmx=24G  根据实际机器情况调整,一般为整个机器内存的一半,同时建议regionServer的堆内存建议不要超过32G ; -XX: ...

  7. NOIP前必须记住的30句话

    NOIP前必须记住的30句话 1.比赛前一天晚上请准备好你的各种证件,事先查好去往考场的路线2.比赛之前请先调整你的屏幕分辨率到你喜欢的大小3.比赛之前请把编译器的字体调为你平时惯用的字体,尤其是注意 ...

  8. 【java】java 中 byte[]、File、InputStream 互相转换

    ========================================================================= 使用过程中,一定要注意close()掉各个读写流!! ...

  9. 解密优秀博士成长史 ——微软亚洲研究院首届博士生学术论坛Panel讨论经验总结

    编者按:有人说“一入博门深似海”,读博前应该做好哪些准备?作为一名博士生,应该有怎样的学术或职业规划?导师还是老板?怎样在师生关系上做到双赢?你是导师心目中优秀的博士生吗?相信以上问题在很多同学心中萦 ...

  10. "听话"的品格的症状

    反思了一下,也许是因为以前比较听话,听大人的话,听老师的话,听长辈的话.听电视剧的话..........哈哈 现在发现,世界是靠自己去认识,去体会的,别人的经验都只能作为参考,绝对不能不加思考的照搬硬 ...