js实现页面与页面之间传值的几种方法优劣
1. cookie 传值, 缺点: cookie储存是需要服务器支持的,本地直接运行静态文件是实现不了的
<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>
2. LocalStorage和SessionStorage传值, 优点:本地静态文件可支持
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;
}
3. Url传值. 优点: 速度快. cookie 和 LocalStorage和SessionStorage 都存在速度慢,反应不过来的问题, 我在a页面写进去,在b页面读出来.有时会读到空值.
function getUrlParam(name){
//正则表达式过滤
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
console.log("location.search==="+location.search);
//substr(1):从字符串第一个位置中提取一些字符
console.log("location.search.substr(1)==="+location.search.substr(1));
//match():在字符串内检索与正则表达式匹配的指定值,返回一个数组给r
console.log("window.location.search.substr(1).match(reg)==="+window.location.search.substr(1).match(reg));
var r = window.location.search.substr(1).match(reg);
//获取r数组中下标为2的值;(下标从0开始),用decodeURI()进行解码
console.log("decodeURI(r[2])==="+decodeURI(r[2]));
if (r != null) return decodeURI(r[2]); return null;
}
js实现页面与页面之间传值的几种方法优劣的更多相关文章
- android fragment传递参数_fragment之间传值的两种方法
在Activity中加载Fragment的时候.有时候要使用多个Fragment切换.并传值到另外一个Fragment.也就是说两个Fragment之间进行参数的传递.查了很多资料.找到两种方法.一种 ...
- ASP.NET 相同页面前后端之间传值
aspx页面前后端之间传值:前端的html或js获得后端的cs,后端的cs获得前端的js值. 一.前端获得后端的值 1.html元素 前端: <td><%=str%></ ...
- ASP.NET 页面之间传值的几种方式
开篇概述 对于任何一个初学者来说,页面之间传值可谓是必经之路,却又是他们的难点.其实,对大部分高手来说,未必不是难点. 回想2016年面试的将近300人中,有实习生,有应届毕业生,有1-3年经验的,有 ...
- 【ASP.NET MVC系列】浅谈ASP.NET 页面之间传值的几种方式
ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...
- React Router v4 页面传值的三种方法
传值方法 1.props.params 使用React router定义路由时,我们可以给指定一个path,然后指定通配符可以携带参数到指定的path: <Route path='/user/: ...
- Intent在Activity之间传值的几种方式
发这篇博客主要讲一下Android中Intent中如何传值的几种方法: 1:基本数据类型,包含了Java八种基本数据类型和CharSequece文本2:八种数据类新对应数组和CharSequece文本 ...
- MVC控制器向View视图传值的三种方法
首先创建一个MVC的项目,其中需要一个控制器(TestController),三个视图(index,edit,detail) 1.项目结构如下:
- js和jquery给iframe src赋值的3种方法
js和jquery给iframe src赋值的3种方法 网页使用iframe嵌入网页时,有时候需要动态处理src的值,而不是写死的,所以我们需要知道如何给iframe src赋值,通常是使用js或 ...
- js二维数组定义和初始化的三种方法总结
js二维数组定义和初始化的三种方法总结 方法一:直接定义并且初始化,这种遇到数量少的情况可以用var _TheArray = [["0-1","0-2"],[& ...
随机推荐
- strtotime 获取之前,之后时间
一年之前 <?php echo strtotime('-1 year'); ?> 一年之后 <?php echo strtotime('+1 year'); ?> 一月之前 & ...
- Oracle(限定查询2)
3.2 对数据进行限定查询 在标准SQL之中定义了许多的运算符. 3.2.1.关系运算符 范例: 范例: 范例: 在使用关系运算符判断字符数据的时候注意大小写的编写问题.因为Oracle是区分大小写的 ...
- OpenModelica Debug
assertion只触发一次 The gdb process has not responded to a command within 40 second(s).This could mean it ...
- 后端调用接口在通过webService发布 解决跨域问题
1.新建一个空的项目 2.添加一个WebService新项 asmx格式的 3.在这里面写方法 加上[WebMethod]标识 前端就可以调用 4.发布WebService 右键服务 添加服 ...
- 《剑指offer》第四十四题(数字序列中某一位的数字)
// 面试题44:数字序列中某一位的数字 // 题目:数字以0123456789101112131415…的格式序列化到一个字符序列中.在这 // 个序列中,第5位(从0开始计数)是5,第13位是1, ...
- 网页常见单位: px em pt % rem vw、vh、vmin、vmax , rem 使用
1.网页常见单位: px em pt vw\vh rem 1.1 px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言 (最终解析单位) em单位名称为相对长度 ...
- CC2 条理分明-----独立思考
独立思考 前几天啊,在吃饭的时候,听到同事们在讨论某幼儿园事件,因为没有人愿意出来作证,所以很可能是造谣.前几天他们还咬牙切齿的指责这个幼儿园,现在怎么就变了.我发现人们的思维变化的太快,我自己也是的 ...
- JAVA中Action层, Service层 ,modle层 和 Dao层的功能区分
Dao层是使用了Hibernate连接数据库.操作数据库(增删改查).Service层:引用对应的Dao数据库操作,在这里可以编写自己需要的代码(比如简单的判断).Action层:引用对应的Servi ...
- echarts的学习
博客1.:https://zrysmt.github.io/ 博客2:http://blog.csdn.net/future_todo/article/details/60956942 工作中一个需求 ...
- C#读取Excel表格的数据
1.创建工程后,需要下载 EPPlus.dll 添加到工程中,这里有一个下载地址:https://download.csdn.net/download/myunity/10784634 2.下面仅实现 ...