本代码简单地分享利用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. Redis命令行之String

    一.Redis之String简介 1. String是redis最基本的数据类型,一个key对应一个value. 2. String是二进制安全的,可以包含任何数据,例如图片或序列化的对象. 3. S ...

  2. Day 13 Python 一之helloworld

    直接肝程序吧! """ # 作业六:用户登录测试(三次机会) count = 1 while count <= 3: user = input('请输入用户名: ' ...

  3. input标签附带提示文字（bootstrap里面输入框的两侧同时添加额外元素）

    一直不太喜欢用定位,今天写界面的时候,要在输入框右边添加默认的元素符号. 第一次尝试,因为本身项目用的是bootstrap所以就想利用输入框的两侧同时添加额外元素. 但是写了代码发现效果不同. 第二次 ...

  4. 洛谷—— P2656 采蘑菇

    https://www.luogu.org/problem/show?pid=2656 题目描述 小胖和ZYR要去ESQMS森林采蘑菇. ESQMS森林间有N个小树丛,M条小径,每条小径都是单向的,连 ...

  5. BZOJ3786 星际探索

    @(BZOJ)[DFS序, Splay] Description 物理学家小C的研究正遇到某个瓶颈. 他正在研究的是一个星系,这个星系中有n个星球,其中有一个主星球(方便起见我们默认其为1号星球),其 ...

  6. 洛谷 P2831 愤怒的小鸟

    P2831 愤怒的小鸟 题目描述 Kiana 最近沉迷于一款神奇的游戏无法自拔. 简单来说,这款游戏是在一个平面上进行的. 有一架弹弓位于 (0,0)(0,0) 处,每次 Kiana 可以用它向第一象 ...

  7. LucaCanali--SystemTap_Linux_IO

    https://github.com/LucaCanali/Linux_tracing_scripts/tree/master/SystemTap_Linux_IO

  8. Linux 开发板网络设置

    改动IP地址步骤: ①改动/etc/eth0-setting 命令:vi /etc/eth0-setting ②改动对应的信息.最后:wq退出 ③重新启动eth0 命令:/etc/init.d/ifc ...

  9. 【LeetCode】Generate Parentheses 解题报告

    [题目] Given n pairs of parentheses, write a function to generate all combinations of well-formed pare ...

  10. 用df命令显示磁盘使用量和占用率。

    使用“df -k”命令,以k为单位显示磁盘使用量和占用率. root@gsg43:/tmp# df -kFilesystem     1K-blocks    Used Available Use% ...