html传值方式有哪几种,关于html页面间传值的几种方法
问题
因最近尝试实现客户端与服务端分离,服务端只提供接口,客户端用html+js实现,分成两个独立的项目部署,因项目是个人项目,客户端展示不考虑使用像Angular、Vue、Native这种前端框架实现,于是全部使用静态页面实现,请求数据用ajax,在开发的过程中,就遇到了页面之间传值的问题。
解决方法
post提交表单跳转的方式肯定不行了,因服务端并不处理这些请求参数,连到达客户端的机会都没有,此时只能考虑get方式了,因get方式参数在url上,跳转后的页面肯定能获取到。还有一种思路,就是将参数存到一个公共的地方,页面都可以获取到,按这两种思路,总结了如下的解决方法。
1、get方式,url携带参数
可以通过window.location.search获取url上的参数。如下面的示例。
a.html
1 跳转
b.html
1
2
3 var a = UrlParam.paramValues("a");
4 console.log(a);
5
getUrlParam.js
1 UrlParam = function() { // url参数
2 var data, index;
3 (function init() {
4 data = []; //值,如[["1","2"],["zhangsan"],["lisi"]]
5 index = {}; //键:索引,如{a:0,b:1,c:2}
6 var u = window.location.search.substr(1);
7 if (u != '') {
8 var params = decodeURIComponent(u).split('&');
9 for (var i = 0, len = params.length; i < len; i++) {
10 if (params[i] != '') {
11 var p = params[i].split("=");
12 if (p.length == 1 || (p.length == 2 && p[1] == '')) {// p | p= | =
13 data.push(['']);
14 index[p[0]] = data.length - 1;
15 } else if (typeof(p[0]) == 'undefined' || p[0] == '') { // =c 舍弃
16 continue;
17 } else if (typeof(index[p[0]]) == 'undefined') { // c=aaa
18 data.push([p[1]]);
19 index[p[0]] = data.length - 1;
20 } else {// c=aaa
21 data[index[p[0]]].push(p[1]);
22 }
23 }
24 }
25 }
26 })();
27 return {
28 // 获得参数,类似request.getParameter()
29 param : function(o) { // o: 参数名或者参数次序
30 try {
31 return (typeof(o) == 'number' ? data[o][0] : data[index[o]][0]);
32 } catch (e) {
33 }
34 },
35 //获得参数组, 类似request.getParameterValues()
36 paramValues : function(o) { // o: 参数名或者参数次序
37 try {
38 return (typeof(o) == 'number' ? data[o] : data[index[o]]);
39 } catch (e) {}
40 },
41 //是否含有paramName参数
42 hasParam : function(paramName) {
43 return typeof(paramName) == 'string' ? typeof(index[paramName]) != 'undefined' : false;
44 },
45 // 获得参数Map ,类似request.getParameterMap()
46 paramMap : function() {
47 var map = {};
48 try {
49 for (var p in index) { map[p] = data[index[p]]; }
50 } catch (e) {}
51 return map;
52 }
53 }
54 }();
此处代码参照:
2、通过cookie,传递
cookie能够存储少量数据到客户端的磁盘中,特定的网页之间是可以共享cookie中的数据。
a.html
1
2
3
4 $.cookie("a","12");
5
b.html
1
2
3
4 var param = $.cookie("a");
5 console.log(param);
6
此处使用了jquery.cookie.js,具体用法可参照此篇文章:
3、window.open和window.opener之间传值
window.open可以打开一个新的页面,在新的页面中可以通过window.opener获取父页面的窗口对象,从而可以获取父窗口中的参数。
a.html
1 打开新的页面
2
3 $('#open').click(function () {
4 window.open('./b.html')
5 })
6
b.html
1
2 var content = window.opener.document.getElementById("open").innerHTML;
3 alert(content);
4
4、h5技术,window.localStorage存储数据
在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。此方法类似cookie,将数据存在一个公共的地方,实现页面之间传值。
a.html
1
2
3
4 function set() {
5 //由于是一个新的技术,你可以通过下面的代码检测你的浏览器是否支持
6 if (window.localStorage) {
7 //存储变量的值
8 localStorage.name = document.all.username.value;
9 location.href = './b.html';
10 } else {
11 alert("NOT SUPPORT");
12 }
13 }
14
b.html
1
2 var value = localStorage["name"];
3 alert(value);
4
总结
对于不同的解决方法,都有优缺点
1、url携带参数
优点:取值方便,可以跨域,利于页面分享,没有环境限制。
缺点:url携带参数值的长度有限制。
2、cookie方式
优点:可以在同源内的的任意网页中访问,存储数据的周期可以自由设置。
缺点:有长度限制。
3、设置窗口之间的父子关联关系
优点:取值方便.只要window.opener指向父窗口,就可以访问所有对象.不仅可以访问值,还可以访问父窗口的方法.值长度无限制。
缺点:两窗口要存在着关系.就是利用window.open打开的窗口。不能跨域。
4、h5技术,window.localStorage存储数据
优点:储存空间大,有5M存储空间。
缺点:不是所有浏览器都支持。
个人倾向第一种方式,主要是自己做的网页可以分享,在任何的地方都可以打开,其他的方式都有环境的要求。如果是做大型项目,架构是实现客户端与服务端的分离,建议还是引入客户端框架,框架实现了路由、参数的传递、以及安全问题,可以大大的提高开发效率。
来源:https://www.cnblogs.com/crazyWang/p/12073472.html
html传值方式有哪几种,关于html页面间传值的几种方法相关推荐
- 【项目经验】——ASP.NET页面间传值
最近项目中涉及到很多页面传值的内容,今天,就和大家分享一下最常用的集中ASP.NET页面间传值的几种方法. 一.QueryString传值 QueryString是平常传值中用的比较多的一种方式,使用 ...
- 微信小程序页面间通信的5种方式
微信小程序页面间通的5种方式 PageModel(页面模型)对小程序而言是很重要的一个概念,从app.json中也可以看到,小程序就是由一个个页面组成的. 如上图,这是一个常见结构的小程序:首页是一个 ...
- ios页面间传递参数四种方式
ios页面间传递参数四种方式 1.使用SharedApplication,定义一个变量来传递. 2.使用文件,或者NSUserdefault来传递 3.通过一个单例的class来传递 4.通过Dele ...
- 详解微信小程序页面间传递信息的三种方式
详解微信小程序页面间传递信息的三种方式 在开发微信小程序的时候,经常会遇到在页面间传递信息的情况,有三种方法可以实现. 1. 使用数据缓存 将要存储的数据使用以下方法放入缓存 wx.setStorag ...
- Windows Phone 7 - 页面间传值 来源-http://blog.csdn.net/dncts/article/details/6160067
Windows Phone 7 - 页面间传值 分类: Windows Phone 7 2011-01-23 20:42 441人阅读 评论(0) 收藏 举报 在页面间导航时传递参数的方式大致有3种, ...
- java 页面之间传值_JSP页面间传值方法
JSP页面间传值方法[@more@] a:最常用的方法是用form中的text, ,然后在b.jsp页面中这样获取 String username=request.getParameter(" ...
- Asp.net页面间传值方式汇总
在优化.NET中,用到了页面传值的功能,汇总出来跟大家分享一下. 我找到了七种传值方式,分别是:URL传值,Session传值,Cookie传值,Server.Transfer传值,Applicati ...
- .NET 页面间传值的几种方法
1. QueryString 这是最简单的传值方式,但缺点是传的值会显示在浏览器的地址栏中且不能传递对象,只适用于传递简单的且安全性要求不高的数值. 传递: location.href="W ...
- ASP.NET十分有用的页面间传值方法(转)
一.目前在ASP.NET中页面传值共有这么几种方式: 1.表单提交 <form action= "target.aspx" method = "post&qu ...
最新文章
- Leangoo看板协作工具“免费版”和“企业版”差异
- Xamarin iOS开发中的编辑、连接、运行
- 《DSP using MATLAB》Problem 6.24
- 高可用集群heartbeat安装配置(一)
- beaglebone black 联网
- hive插入数据:FAILED: ParseException line 1:12 missing TABLE at 'student' near 'EOF'
- opencv图像拼接_使用OpenCV进行图像全景拼接
- js 保留两位小数(四舍五入)
- python中的date的含义_python中date、datetime、string的相互转换
- 新增5大运维特性!华为云DAS服务高效运维有妙招
- 【BZOJ3997】组合数学,总之是DP就对了
- Ubuntu 18.04安装codeblocks 17-12
- Vue 开发环境显示log信息
- python关于组合数据类型_python组合数据类型
- GDAL源码剖析(十二)之GDAL Warp API使用说明
- 24款神级插件,让你的 vscode更牛
- 小米5S TWRP刷面具、EdXposed
- 位操作技巧:Bit Twiddling Hacks
- 混合波束成形| 通过天线空间方向图理解波束成形的物理意义
- 未来生活进行时: 互联网”进化论”——达尔文与人工智能的故事?!