Javascript静态页面的三种传值方式

来源：互联网发布：艾琳和后羿的伤害数据编辑：程序博客网时间：2024/06/15 01:22

cookie

优点:可以在同源内的任意网页内访问.生命期可以设置.
缺点:值长度有限制.

Cookie是浏览器存储少量命名数据.

它与某个特定的网页或网站关联在一起.
Cookie用来给浏览器提供内存,
以便脚本和服务器程序可以在一个页面中使用另一个页面的输入数据.

这里推荐使用jquery的cookie.js

下载与引入:jquery.cookie.js基于jquery；先引入jquery，再引入：jquery.cookie.js；下载：http://plugins.jquery.com/cookie/

1
2
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>

使用：

1.添加一个"会话cookie"

1
$.cookie('the_cookie', 'the_value');

这里没有指明 cookie有效时间，所创建的cookie有效期默认到用户关闭浏览器为止，所以被称为 “会话cookie（session cookie）”。

2.创建一个cookie并设置有效时间为 7天

1
$.cookie('the_cookie', 'the_value', { expires: 7 });

这里指明了cookie有效时间，所创建的cookie被称为“持久 cookie （persistent cookie）”。注意单位是：天；

3.创建一个cookie并设置 cookie的有效路径

1
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });

在默认情况下，只有设置 cookie的网页才能读取该 cookie。如果想让一个页面读取另一个页面设置的cookie，必须设置cookie的路径。cookie的路径用于设置能够读取 cookie的顶级目录。将这个路径设置为网站的根目录，可以让所有网页都能互相读取 cookie （一般不要这样设置，防止出现冲突）。

4.读取cookie

1
$.cookie('the_cookie');

5.删除cookie

1
$.cookie('the_cookie', null);   //通过传递null作为cookie的值即可

6.可选参数

1
2
3
4
5
6
$.cookie('the_cookie','the_value',{
    expires:7,  
    path:'/',
    domain:'jquery.com',
    secure:true
})　

expires：（Number|Date）有效期；设置一个整数时，单位是天；也可以设置一个日期对象作为Cookie的过期日期；
path：（String）创建该Cookie的页面路径；
domain：（String）创建该Cookie的页面域名；
secure：（Booblean）如果设为true，那么此Cookie的传输会要求一个安全协议，例如：HTTPS；

通过URL传递

能过URL进行传值.把要传递的信息接在URL上

优点:取值方便.可以跨域.
缺点:值长度有限制，而且不太安全。

假设有 a,b 两个页面，a 页面有一超链接跳转到 b 页面，并将携带的数据填充到 b 页面的 input 框里面

!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>A page</title>    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>    <script>        $(document).ready(function() {            // 拼接跳转url中要传输的数据            var dataUrl = [];            dataUrl.push('apple');            dataUrl.push('bear');            $('#aPage').on('click',function(){                $('#aPage').attr("href","b.html?data=" + dataUrl);            })        });    </script></head><body>    <a href="b.html" id="aPage">在url里带数据跳转到b页面</a></body></html>

说明

首先我定义一个字符串数组 dataUrl 来存放传递的数据
这里假设我要传递的数据为 apple,bear
通过 jQuery 的点击事件，将 a 标签的 href 属性修改成加上数据的 url

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>B page</title>    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>    <script>        $(document).ready(function() {            //使用正则表达式获取url中的参数            function getUrlParam(name) {                //构造一个含有目标参数的正则表达式对象                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");                //匹配目标参数                 var r = window.location.search.substr(1).match(reg);                  //返回参数值                if (r != null) return unescape(r[2]); return null;            }            var urlData = getUrlParam('data');            // 将数据填充到input框里面            $('#getUrlData').val(urlData);        });</script></head><body>    <input type="text" id="getUrlData"></body></html>

说明

创建一个 JavaScript 函数，使用正则表达式获取 url 里面的数据值
将数据填充到 input 框里面

总结

利用 url 在静态页面间传值，无非是利用 url 里 ? 后面携带的数据，然后在目标页面通过方法获取传过来的数据，在本文中通过正则表达式检索数据并获取。

window open

这两窗口之间存在着关系.父窗口parent.htm打开子窗口son.htm
子窗口可以通过window.opener指向父窗口.这样可以访问父窗口的对象.

<input type=text name=maintext>  <input type=button value="Open">  Read.htm  <script language="javascript" >  //window.open打开的窗口.  //利用opener指向父窗口.  var parentText = window.opener.document.all.maintext.value;  alert(parentText);  </script>

优点:取值方便.只要window.opener指向父窗口,就可以访问所有对象.不仅可以访问值,还可以访问父窗口的方法.值长度无限制.
缺点:两窗口要存在着关系.就是利用window.open打开的窗口.不能跨域.

阅读全文

0 0