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. 每日质量NPM包模态框_react-modal

    一.react-modal 官方定义: Accessible modal dialog component for React.JS 理解: 一个容易使用的React模态框组件 二.用法 有时候我们不 ...

  2. 每日质量NPM包拖拽文件上传_react-dropzone

    一.react-dropzone 官方定义: Simple HTML5-compliant drag'n'drop zone for files built with React.js. 理解: 一个 ...

  3. JSON平铺功能的实现(JS操作JSON数据)

    一.什么是JSON平铺 JSON平铺分成两种: 平铺的json转树结构的json 例如: { a: 'value', b: 'b1.value' } // 转换成=> { a: 'value', ...

  4. 理解 Redis(3) - 字符串值

    正如前面所讲的, redis 的数据结构就是一系列的键值对键 -> printable ASCII (可打印的 ASCII 码, 最大值是 512MB)值 -> Primitives (基 ...

  5. Codeforces 600E. Lomsat gelral(Dsu on tree学习)

    题目链接:http://codeforces.com/problemset/problem/600/E n个点的有根树,以1为根,每个点有一种颜色.我们称一种颜色占领了一个子树当且仅当没有其他颜色在这 ...

  6. Django中ORM简介与单表数据操作

    一. ORM简介  概念:.ORM框架是用于实现面向对象编程语言种不同类型系统的数据之间的转换 构建模型的步骤:重点 (1).配置目标数据库信息,在seting.py中设置数据库信息 DATABASE ...

  7. 解决VS2017引用报错问题

    1.打开VS2017下的Developer Command Prompt for VS 2017 2.然后在CMD窗口输入 CD CD C:\Program Files\Microsoft Visua ...

  8. Ado.net之存储过程的使用【三】

    重点是红色标记区域的代码,设置本次执行的是存储过程,如果不设置,默认操作的是sql语句 private void LoadData() { string constr = @"databas ...

  9. 拒绝采样 Rejection Sampling

    2018-12-09 16:40:30 一.使用Rand7()来生成Rand10() 问题描述: 问题求解: 这个问题字节跳动算法岗面试有问到类似的,有rand6,求rand8,我想了好久,最后给了一 ...

  10. 动态规划-最大的正方形面积 Maximal Square

    2018-09-13 19:19:44 问题描述: 问题求解: 方法一: 使用动态规划来求解,算法时间复杂度O(n^2). dp[i][j] : 以(i, j)为右下角的面积最大的正方形的边长. 初始 ...