js实现把一个页面层数据传递到另一个页面
由于之前面试,被问到过此问题,所以今天特意整理了一下。由于自己技术水平有限,若存在错误,欢迎提出批评。
本博客整理了两种方式从一个页面层向另一个页面层传递参数。
一. 通过cookie方式
1. 传递cookie页面的html,此处命名为a.html
请输入用户名和密码:
<input id="userName" type="text" />
<input id="passwords" type="password" />
<button id="btn">设置</button>
<button onclick="login()">传递cookie</button>
<button onclick="deletecookie()">删除</button>
2.a.html的js代码
//设置cookie
var setCookie = function (name, value, day) {
//当设置的时间等于0时,不设置expires属性,cookie在浏览器关闭后删除
var expires = day * 24 * 60 * 60 * 1000;
var exp = new Date();
exp.setTime(exp.getTime() + expires);
document.cookie = name + "=" + value + ";expires=" + exp.toUTCString();
};
//删除cookie
var delCookie = function (name) {
setCookie(name, ' ', -1);
};
//传递cookie
function login() {
var name = document.getElementById("userName");
var pass = document.getElementById("passwords");
setCookie('userName',name.value,7)
setCookie('password',pass.value,7);
location.href = 'b.html'
}
function deletecookie() {
delCookie('userName',' ',-1)
}
3. 接受cookie的页面,此处定义为b.html
<button onclick="getcookie()">获取</button>
4. b.html的js代码
//获取cookie代码
var getCookie = function (name) {
var arr;
var reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg)){
return arr[2];
}
else
return null;
};
//点击获取按钮之后调用的函数
function getcookie() {
console.log(getCookie("userName"));
console.log(getCookie("password"))
}
二. 通过url传递参数的方式
该案例也是从a.html向b.html页面传递参数
1. a.html的代码
<input type="text" value="猜猜我是谁">
<button onclick="jump()">跳转</button>
2.点击跳转按钮可以将input标签的value值传递到b.html
function jump() {
var s = document.getElementsByTagName('input')[0];
location.href='7.获取参数.html?'+'txt=' + encodeURI(s.value);
}
3. b.html中的代码
<div id="box"></div>
var loc = location.href;
var n1 = loc.length;
var n2 = loc.indexOf('=');
var txt = decodeURI(loc.substr(n2+1,n1-n2));
var box = document.getElementById('box');
box.innerHTML = txt;
三.通过localStorage
通过localStorage传递参数类似cookie。但是要注意:要访问一个localStorage对象,页面必须来自同一个域名(子域名无效),使用同一种协议,在同一个端口上。
1. a.html中的js文件
//将localStorage传递到哪个页面
location.href = 'b.html'
//设置localStorage
window.localStorage.setItem('user','haha');
2.b.html中的文件
<button onclick="getcookie()">获取</button>
function getcookie() {
//获取传递过来的localStorage
console.log(window.localStorage.getItem('user'))
}
js实现把一个页面层数据传递到另一个页面的更多相关文章
- JS实现把一个页面层数据传递到另一个页面的两种方式
本博客整理了两种方式从一个页面层向另一个页面层传递参数. 一. 通过cookie方式 1. 传递cookie页面的html,此处命名为a.html 请输入用户名和密码: <input id=&q ...
- Javascript把数据从一个页面的层传递到另一个页面层里面
背景:昨天头脑发热投了某一家国企的计算机类岗位(说是有前端岗位),通过找同学内推,虽然也笔试了一大堆题目(行测题,计算机网络,http协议,英译汉,古诗文默写,自己把品质排序并且进行200字以上的阐述 ...
- JS事件 加载事件(onload)注意:1. 加载页面时,触发onload事件,事件写在<body>标签内。 2. 此节的加载页面,可理解为打开一个新页面时。
加载事件(onload) 事件会在页面加载完成后,立即发生,同时执行被调用的程序. 注意:1. 加载页面时,触发onload事件,事件写在<body>标签内. 2. 此节的加载页面,可理解 ...
- 《项目经验》--通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来的Json数据写入数据库表中
先看一下我要实现的功能界面: 这个界面的功能在图中已有展现,课程分配(教师教授哪门课程)在之前的页面中已做好.这个页面主要实现的是授课,即给老师教授的课程分配学生.此页面实现功能的步骤已在页面 ...
- 通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来的Json数据写入数据库表中
摘自:http://blog.csdn.net/mazhaojuan/article/details/8592015 通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来 ...
- [转] 微信小程序 页面跳转 传递参数
本文转自:http://blog.csdn.net/qq_31383345/article/details/52795212 微信小程序的页面跳转,页面之间传递参数笔记. CSDN微信小程序开发专栏, ...
- Atitit. Js 冒泡事件阻止 事件捕获 事件传递 事件代理
Atitit. Js 冒泡事件阻止 事件捕获 事件传递 事件代理 1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 ...
- ASP.NET多种不同页面间数据传递的方法
1. Get(即使用QueryString显式传递) 方式:在url后面跟参数. 特点:简单.方便. 缺点:字符串长度最长为255个字符:数据泄漏在url中. 适用数据 ...
- 使用context来传递数据,一个context是一系列变量
页面设计工作和python代码分离,所以我们引用模板来实现这个功能. 一.模板实例 下面是一个模板的实例: [python]<html><head><title>O ...
随机推荐
- nRF5282 资料链接帖子
官方硬件设计参考
- 典型CAN通讯电路(带隔离)
典型CAN通讯电路(带隔离) CAN是控制器局域网络(Controller Area Network, CAN)的简称,是由德国BOSCH公司开发的,并最终成为国际标准(ISO 11898),是国际上 ...
- Lambda 表达式的示例
本文中的过程演示如何使用 lambda 表达式. 有关 lambda 表达式的概述,请参见 C++ 中的 Lambda 表达式. 有关 lambda 表达式结构的更多信息,请参见 Lambda 表达式 ...
- javascript---我对闭包的理解
一.闭包 闭包是一种特殊的对象.它由两部分构成:函数,以及创建该函数的环境.环境由闭包创建时在作用域中的任何局部变量组成. 如何理解这句话:以一个例子说明;(from MDN) funct ...
- ACP敏捷管理
- expdp导出时报错ora-16000
一.问题现象:在对数据库进行expdp导出时发生报错ora-16000,脚本如下: nohup expdp "'/ as sysdba'" schemas=shp DIRECTOR ...
- OpenGL ES画板
一.概述 利用自定义顶点和片元着色器渲染,并且设置图片纹理颜色为画笔颜色 二.核心代码 - (void)renderLineFromPoint:(CGPoint)start toPoint:(CGPo ...
- 在centos环境下编译安装myrocksdb
rocksdb(https://rocksdb.org.cn/)是脸书(facebook)公司开源的一个key-value存储引擎,基于leveldb开发.rocksdb使用的是LSM存储引擎,纯c+ ...
- git 源码学习(init-db) 提交版本号 083c516331
写在前面的废话: 学完git之后,还是感觉云里雾里的,于是乎,就想到了通过学习git源码,来加深git的熟练度,同时学习一下c语言编程. git源码学习,逐步分析 这篇帖子是逐步分析git源码的,将g ...
- tkinter的GUI设计:界面与逻辑分离(二)-- 菜单栏
由于要用到文件对话框和消息对话框,所以先给出下面的列表. py2 与 py3 中 tkinter 的变化: Tkinter → tkinter tkMessageBox → tkinter.messa ...