js实现页面与页面之间传值（页面1->页面2）

最新推荐文章于 2020-10-22 09:34:51 发布
最新推荐文章于 2020-10-22 09:34:51 发布
阅读量2.7k 收藏 9
点赞数 3
分类专栏： 初级经验分享
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ysiqiqi/article/details/84257935
版权

一.利用地址栏URL传值（最常用）

1.页面1

<input type="text" id="txt">
</br>
<input type="button" value="TEST" οnclick="test()"/>
<SCRIPT LANGUAGE="JavaScript">
function
 test(){       
var s =document.getElementById("txt");
location.href="2.html?"+"txt="+encodeURI(s.value); //添加参数
 }
</SCRIPT>

2.页面2

  <script language="javascript" type="text/javascript">
var loc=location.href;
var n1=loc.length;//地址的总长度
var n2=loc.indexOf("=");//取得=号的位置
var id=decodeURI(loc.substr(n2+1, n1-n2));//从=号后面的内容
alert(id);//  获取值
document.write(id)
 
  </script>

二.cookie传值

1.页面1

<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
<title>无标题文档</title>
<style>
    div{ height: 36px; line-height: 36px; border: #eee solid 1px; margin: 10px;}
</style>
<script>
    
    
//添加 cookie
function cp_add_cookie(num){
setCookie("cp_keynum",num,2);  //添加参数
}
//查找
function cp_seek_cookie(){
var cp_keynum=getCookie("cp_keynum");
var find_result = document.getElementById("find_result2");
find_result.innerHTML = "cp_keynum == " + cp_keynum;  
}
 
 
//设置 cookie 值的函数,创建一个函数用于存储访问者的名字
function setCookie(cname,cvalue,exdays){
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}
//获取 cookie 值的函数,创建一个函数用户返回指定 cookie 的值
function getCookie(cname){
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name)==0) return c.substring(name.length,c.length);
    }
    return "";
}
 
</script>
</head>
<body>
<h1>利用JavaScript Cookie存储 </h1>
<div οnclick="cp_add_cookie(1)">添加1</div>
<div οnclick="cp_add_cookie(2)">添加2</div>
<div οnclick="cp_add_cookie(3)">添加3</div>
<div οnclick="cp_seek_cookie()">查找</div>
<div id="find_result2"></div>
 
</body>

2.页面2

<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
<title>接受数据</title>
<style>
    div{ height: 36px; line-height: 36px; border: #eee solid 1px; margin: 10px;}
</style>
<script>
    
    
//查找 cookie
 
function cp_seek_cookie(){
var cp_keynum=getCookie("cp_keynum");  //  获取值
var find_result = document.getElementById("find_result2");
find_result.innerHTML = "cp_keynum == " + cp_keynum;  
}
 
//获取 cookie 值的函数,创建一个函数用户返回指定 cookie 的值
function getCookie(cname){
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name)==0) return c.substring(name.length,c.length);
    }
    return "";
}
 
</script>
 
</head>
<body>
<h1>利用JavaScript Cookie存储 </h1>
<div οnclick="cp_seek_cookie()">查找JavaScript Cookie存储的值</div>
<div id="find_result2"></div>
</body>

 

三.Web 存储传值

1.页面1

<h1>利用HTML5 Web 存储 localStorage</h1>
<div οnclick="save(1)">添加1</div>
<div οnclick="save(2)">添加2</div>
<div οnclick="save(3)">添加3</div>
<div οnclick="save(4)">添加4</div>
<div οnclick="save(5)">添加5</div>
<div οnclick="find()">查找</div>
 
<div id="find_result"></div>
 
<script>
if(typeof(Storage)=="undefined")
{
  document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
}
//保存数据  
function save(cp_value){  
    var num = new Object;
    num.cp_keynum ="key_num";  
    num.cp_num_value = cp_value;
    var str = JSON.stringify(num); // 将对象转换为字符串
    localStorage.setItem(num.cp_keynum,str);  //添加参数
    alert("添加成功");
}
 //查找数据  
function find(){  
    var cp_keynum = "key_num";  
    var str = localStorage.getItem(cp_keynum);  
    var find_result = document.getElementById("find_result");
    var num = JSON.parse(str);  
    find_result.innerHTML = cp_keynum + "==" + num.cp_num_value;  
}  
    
</script>

2.页面2

<h1>利用HTML5 Web 存储 localStorage</h1>
<div οnclick="find()">查找</div>
<div id="find_result"></div>
<script>
if(typeof(Storage)=="undefined")
{
  document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
}
 
 //查找数据  
function find(){  
    var cp_keynum = "key_num";  
    var str = localStorage.getItem(cp_keynum);  / / 获取值
    var find_result = document.getElementById("find_result");
    var num = JSON.parse(str);  
    find_result.innerHTML = cp_keynum + "==" + num.cp_num_value;  
}  
</script>

Ysiqiqi
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
js html页面之间传值
林先生学习博客
09-13 908
用法： var name=UrlParm.parm(“name”); 注意 ：代码只是解析地址栏传参？后的值 不能够传对象 。 js代码 UrlParm = function() { // url参数 var data, index; (function init() { data = []; index = {}; var u = windo...
javascript 通过地址栏实现页面间传值（1）
kaleid_liner的博客
10-11 692
我们在进行网页开发的时候，有时候需要从一个界面打开另一个页面，并将当前页面中的某个值传递到新打开的页面当中。通常的做法都是先将值传递给后台程序，再通过后台程序打开新页面，并将所值传递给新页面。当然如果所传递的值不需要经过后台，我们可以通过 javascript，直接打开新页面，并将值传递过去。 首先，我们需要新建两个html网页，一个叫做post.html ，另一个叫做 read.html 。
javascript 两个页面之间传值
10-17
javascript 两个页面之间传值 使用window.open（）
js静态页面间的传值
黄长旭的专栏
03-07 4680
一：JavaScript静态页面值传递之URL篇 能过URL进行传值.把要传递的信息接在URL上. 例子： 参数传出页面Post.htm—>   function Post() { 　　//单个值 Read.htm?username=baobao; 　　//多全值 Read.htm?username=baobao&sex=male; 　　url = "Read.h
在JS中。页面间传值
04-24
在JS里面，在A页面中打开B页面。然后在B页面中返回一个值,在A页面显示
页面之间传值的方法
weixin_34292959的博客
08-07 694
在前端开发中我们常常需要从一个跳到另一个页面，并且将当前页面的数据传递过去，总结一下我的方法： 1 通过URL传值，不过有个缺点就是传输的值不能太大，因为浏览器对与URL的长度是有限制的。 首先定义getQueryString方法 function getQueryString(name) { var reg = new RegExp('(^...
js实现页面与页面之间传值的三种方法
热门推荐
橙-极纪元-cplvfx-JJY.Cheng
07-12 4万+
利用地址栏URL传值 A页面传值 <input type="text" id="txt"> </br> <input type="button" value="TEST" onclick="test()"/> <SCRIPT LANGUAGE="JavaScript"> function test(){ var s...
JavaScript实现在页面间传值的方法
10-24
总结来说，本文档详细介绍了几种基于JavaScript在页面间传递参数的实现方法，适用于那些希望减少服务器交互而采用前端技术来增强用户体验的场景。这些方法包括通过URL重定向传递参数、使用隐藏表单字段传递参数以及...
JS父页面与子页面相互传值方法
10-26
在多页面应用或者嵌入式框架（如iframe）中，经常需要进行父页面与子页面之间的数据交换。下面将详细介绍如何在不同场景下使用JS实现这种传值。 一、子页面是父页面通过`window.open`弹出的情况 当子页面是通过`...
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
10-16
在Layui框架中，使用表格模板与layer弹层组件进行父页面和子页面之间的传值交互是一项常见的需求。Layui是一个轻量级的前端UI库，其layer模块提供了丰富的弹窗功能，包括对话框、提示、加载层等，非常适合用于构建...
jquery利用json实现页面之间传值的实例解析
10-20
本文将深入讲解如何使用jQuery和JSON（JavaScript Object Notation）技术实现在页面之间的传值。JSON是一种轻量级的数据交换格式，它允许开发者以易于读写的方式存储和传输数据。jQuery则是一个强大的JavaScript库，...
详解AngularJS跨页面传值（ui-router）
10-19
在本文中，我们将深入探讨如何使用UI-Router实现AngularJS的跨页面传值，这对于构建复杂的多页面应用至关重要。 首先，我们需要在发送页面（即源页面）的控制器中设置值的传递。在这个例子中，`CafeCtrl` 控制器...
JS页面间传值
Room
10-09 696
1. window.opener方法从父页面取值
js在页面间传值的方法记录
a_230000的博客
01-30 144
window.showModalDialog与window.returnValue 两个js方法 昨天遇到了一些关于页面弹窗的传值问题 于是就找了一波资料,发现上面两个方法挺好的 父页面的js中 function father(){} var dto = {};dto.aac001 = document.all.aac001.value;dto.aa...
ArcGIS API for Javascript (六)
会飞的鱼@的博客
10-22 256
地图查询 1、任务查询 IdentifyTask IdentifyTask ：针对加载在地图上的 属性和空间查询，url不能指定单个图层，必须指定整个服务 引用： 查询任务：IdentifyTask 查询参数：IdentifyParameters require(["esri/tasks/IdentifyTask","esri/tasks/support/IdentifyParameters"], function(IdentifyTask,IdentifyParameters) {
js页面传参
心境
08-15 306
cookie
js页面传值
iFlyingCoder的博客
02-25 1154
//发送数据 //从本页面获取数据 var url; function GetData(obj,tr) { var LogID = document.getElementById("txtLogID").value; var FHSRID = document.getElementById("txtFHSRID").value; var DeviceName = do
Nuxt嵌套路由：实现父子页面默认子组件显示与传值
在提供的代码示例中，`pages/parent.vue` 文件是父组件，它包含了一个列表，使用 `<nuxt-link>` 来导航到两个子页面：`child.vue` 和 `child2.vue`。每个子组件有自己的模板，如 `child.vue` 接收一个名为 `foobar` ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值