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. 为 10000+ 业务系统提供数据可视化能力的 AntV 又进化了

    小蚂蚁说: 2018 年 AntV 品牌日以知新.知心为主题,旨在让产品一直「知新」,与用户一直「知心」.AntV 是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单方便.专业可靠.无限可能的数 ...

  2. Codeforces Round #424 (Div. 2, rated, based on VK Cup Finals) D. Office Keys time limit per test2 seconds 二分

    D. Office Keys time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  3. Hibernate的查询功能

    1.Query对象 1.使用Query对象,不需要写sql语句,但是写hql语句 (1)hql:hibernate query language,提供查询语言,这个hql语言和普通sql语句相似 (2 ...

  4. C# txt文件的读取与写入

    C#创建记事本方法一://创建对象 FileStream stream = new FileStream(@"d:\aa.txt",FileMode.Create);//fileM ...

  5. MySQL LIMIT的使用

    SELECT语句返回所有匹配的行,它们可能是指定表中的每个行.为 了返回第一行或前几行,可使用LIMIT子句. 比如我原始的student表如下: 我现在想输出前4行,就使用 SELECT * FRO ...

  6. VUE项目实现页面跳转

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

  7. Unity中的粒子特效的 RendererQ 排序

    这里接https://www.cnblogs.com/luguoshuai/p/10021660.html 这里介绍两套粒子排序的方法. 首先声明,这两套排序方法均不是本人所写,是在项目开发的过程当中 ...

  8. Unity 通过代码简单实现文理的灰化显示

    1.可以用于纹理的处理,也可用于模型显示的处理(比如某件准备或者服饰未获取的时候,灰化显示) 线上对比图:                     using System.Collections; ...

  9. 推送消息 web push notification

    参考 : https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/   ( step b ...

  10. Pytorch Visdom可视化工具

    2018-12-04 14:05:49 Visdom是Facebook专门为PyTorch开发的一款可视化工具,其开源于2017年3月.Visdom十分轻量级,但却支持非常丰富的功能,能胜任大多数的科 ...