window.name应用于浏览器端数据存储

本代码简单地分享利用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应用于浏览器端数据存储

时间: 2024-08-07 00:17:05

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

客户端(浏览器端)数据存储技术概览

客户端(浏览器端)存储数据有诸多益处,最主要的一点是能快速访问(网页)数据.目前常见的浏览器端数据存储方法有:Cookies,Local Storage,Session Storage,IndexedDB. Cookies Cookies 是一种在文档内存储字符串数据最典型的方式.一般而言,cookies 会由服务端发送给客户端,客户端存储下来,然后在随后让请求中再发回给服务端.这可以用于诸如管理用户会话,追踪用户信息等事情. 此外,客户端也用使用 cookies 存储数据.因而,cookies

浏览器的数据存储

会有这么一些个需求,数据不需要存储到服务器端,只需要在客户端(浏览器)取到相关数据,那么有几种方式我们可以使用: Cookie.LocalStorage.SessionStorage.UserData,当然还有一些方式比如flash cookie,Gears等要依赖插件,这就不在我们的介绍范围了. 我会简单介绍其用法.适用场景以及浏览器兼容性:   原生用法 适用场景 浏览器兼容 可存储最大空间 推荐的库 Cookie //写入 document.cookie = "name=oeschger&

常见的浏览器端的存储技术:cookie

工作原理: cookie是存在用户硬盘中,用户每次访问站点时,Web应用程序都可以读取Cookie包含的信息.当用户再次访问这个站点时,浏览器就会在本地硬盘上查找与该 URL 相关联的 Cookie.如果该Cookie存在,浏览器就将它加到requestheader的Cookie字段中,与http请求一起发送到该站点.(cookie是存于用户硬盘的一个文件,这个文件通常对应于一个域名,也就是说,cookie可以跨越一个域名下的多个网页,但不能跨越多个域名使用.) 1.优点:兼容性好 分担了服务器

大端小端数据存储方式

大端:BigEndian 大端模式第一个字节是最高位字节(按照从低地址到高地址的顺序存放数据的高位字节到低位字节),高字节在低地址, 低字节在高地址. 小端:LittleEndian  小端模式第一个字节是最低位字节(按照从低地址到高地址的顺序存放数据的低位字节到高位字节),高字节在高地址, 低字节在低地址. egg: 从内存地址为0x0000开始有以下数据:0x1234abcd BigEndian: 低地址 --> 高地址 0x0000  0x0001  0x0002  0x0003 0x12

阮一峰javascript标准参考教程 (IndexedDB:浏览器端数据库)

1.概述 随着浏览器的处理能力不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少用户等待从服务器获取数据的时间. 现有的浏览器端数据储存方案,都不适合储存大量数据:cookie不超过4KB,且每次请求都会发送回服务器端:Window.name属性缺乏安 全性,且没有统一的标准:localStorage在2.5MB到10MB之间(各家浏览器不同).所以,需要一种新的解决方案,这就是 IndexedDB诞生的背景. 通俗地说,IndexedDB就是浏览器端数据库,可以被网页脚本程

html5 浏览器端数据库

一.为什么使用浏览器端数据库 随着浏览器的处理能力不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少用户等待从服务器获取数据的时间. 二.使用IndexedDB的原因 现有的浏览器端数据储存方案,都不适合储存大量数据:cookie不超过4KB,且每次请求都会发送回服务器端:Window.name属性缺乏安全性, 且没有统一的标准:localStorage在2.5MB到10MB之间(各家浏览器不同).所以,需要一种新的   解  决方案,这就是IndexedDB诞生的背景. 三

session的官方定义是:Session:在计算机中,尤其是在网络应用中,称为“会话控制”。Session 对象存储特定用户会话所需的属性及配置信息。 说白了session就是一种可以维持服务器端的数据存储技术。session主要有以下的这些特点: 1. session保存的位置是在服务器端 2. session一般来说是要配合cookie使用,如果是浏览器禁用了cookie功

session的官方定义是:Session:在计算机中,尤其是在网络应用中,称为"会话控制".Session 对象存储特定用户会话所需的属性及配置信息. 说白了session就是一种可以维持服务器端的数据存储技术.session主要有以下的这些特点: 1. session保存的位置是在服务器端 2. session一般来说是要配合cookie使用,如果是浏览器禁用了cookie功能,也就只能够使用URL重写来实现session存储的功能 3. 单纯的使用session来维持用户状态的话

web开发人员须知的web缓存知识–将数据缓存到浏览器端Net实现

现实中,服务器在向浏览器发送的数据中,一部分数据是不经常更新的,如果能将这部分数据缓存到浏览器端,将会大大降低传输的数据,提高应用的性能.通过Expires策略,可以使用HTTP 协议定义的缓存机制将数据缓存到浏览器中.下面我们看看Net是如何实现将数据缓存到浏览器中的. protected void Page_Load(object sender, EventArgs e) { if (Request.Headers["If-Modified-Since"] != null &

Chrome浏览器扩展开发系列之八:Chrome扩展的数据存储

Google Chrome浏览器扩展可以使用如下任何一种存储机制: HTML5的localStorage API实现的本地存储(此处略) Google的chrome.storage.* API实现的浏览器存储 Google的chrome.cookies.* API实现的cookie存储 1) chrome.storage API实现的浏览器存储 Chrome浏览器扩展通过chrome.storage.* API,可以存取数据或监听数据的变化. 在manifest.json文件中注册storage