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实现页面与页面之间传值的几种方法优劣的更多相关文章

  1. android fragment传递参数_fragment之间传值的两种方法

    在Activity中加载Fragment的时候.有时候要使用多个Fragment切换.并传值到另外一个Fragment.也就是说两个Fragment之间进行参数的传递.查了很多资料.找到两种方法.一种 ...

  2. ASP.NET 相同页面前后端之间传值

    aspx页面前后端之间传值:前端的html或js获得后端的cs,后端的cs获得前端的js值. 一.前端获得后端的值 1.html元素 前端: <td><%=str%></ ...

  3. ASP.NET 页面之间传值的几种方式

    开篇概述 对于任何一个初学者来说,页面之间传值可谓是必经之路,却又是他们的难点.其实,对大部分高手来说,未必不是难点. 回想2016年面试的将近300人中,有实习生,有应届毕业生,有1-3年经验的,有 ...

  4. 【ASP.NET MVC系列】浅谈ASP.NET 页面之间传值的几种方式

    ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...

  5. React Router v4 页面传值的三种方法

    传值方法 1.props.params 使用React router定义路由时,我们可以给指定一个path,然后指定通配符可以携带参数到指定的path: <Route path='/user/: ...

  6. Intent在Activity之间传值的几种方式

    发这篇博客主要讲一下Android中Intent中如何传值的几种方法: 1:基本数据类型,包含了Java八种基本数据类型和CharSequece文本2:八种数据类新对应数组和CharSequece文本 ...

  7. MVC控制器向View视图传值的三种方法

    首先创建一个MVC的项目,其中需要一个控制器(TestController),三个视图(index,edit,detail) 1.项目结构如下:

  8. js和jquery给iframe src赋值的3种方法

    js和jquery给iframe src赋值的3种方法   网页使用iframe嵌入网页时,有时候需要动态处理src的值,而不是写死的,所以我们需要知道如何给iframe src赋值,通常是使用js或 ...

  9. js二维数组定义和初始化的三种方法总结

    js二维数组定义和初始化的三种方法总结 方法一:直接定义并且初始化,这种遇到数量少的情况可以用var _TheArray = [["0-1","0-2"],[& ...

随机推荐

  1. SNMOJ 31

    考虑将给入的$A$数组差分,得到差分数组$C$ 每一次操作相当于把差分数组的每一位${+1}$,其中一个位置上${-n+1}$. 我们可以直接算出要进行多少次操作:${T=\frac{\sum A[i ...

  2. JaveWeb 公司项目(1)----- 使Div覆盖另一个Div完成切换效果

    最近在做网页,用的是CSS+DIV的布局方法,搭建了一个简易的界面,大体上分为三个部分,如图所示: 左侧的为主功能导航栏,右侧是具体的功能实现,下方是固定的版权声明,单击左边不同的导航按钮,在div中 ...

  3. Token和SessionStorage(会话存储对象)

    sessionStorage数据只在当前标签页共享 存在本地   关闭浏览器后会清除数据(关闭标签页不会清楚) localStorage数据会存在浏览器中  浏览器关了数据也还在 只有清除缓存才会消失 ...

  4. 从classloader的变更说起

    classloader从1.6到1.7整体分成了两个版本.重点区别就是并行类加载. 1.6版本 protected synchronized Class loadClass(String name, ...

  5. VUE项目实现页面跳转

    打开一个VUE项目,目录结构是这样的: 如现在有两个页面aaa和HelloWorld,路由配置在index.js中: import Vue from 'vue' import Router from ...

  6. d3.select(this)不能用箭头函数

    d3中典型的数据绑定片段 const items = svg.selectAll('g') .data(gdfs,(d)=> d.name); const enter = items.enter ...

  7. cyberduck的SSH登录

    1.通过配置SSH秘钥. 2.不点匿名(不要点匿名),如果非要填一个名字的话,你写root就行. 3.书签.

  8. 第 8 章 容器网络 - 059 - 安装配置 flannel

    安装配置 flannel 1) build flannel flannel 没有现成的执行文件可用,必须自己 build,最可靠的方法是在 Docker 容器中 build. 不过用于做 build ...

  9. 有效利用1 on 1

    2019-01-08 16:32:13 感觉1 on 1是浪费时间? 感觉1 on 1时没啥好说? 感觉老板总是不想1 on 1? 怎样才能 升职加薪? 一切都从有效的1 on 1开始!! 什么是1 ...

  10. legend2---开发日志8(thinkphp和vue如何配合才能达到最优)

    legend2---开发日志8(thinkphp和vue如何配合才能达到最优) 一.总结 一句话总结:凡是php可以做的,都可以先在后端处理好数据,然后再丢给前端 凡php可以做的,都可以先在后端处理 ...