首页
登录    写博文 
登录
我的博客
我的收藏
两个静态html页面传值方法的总结
 0   0   0  2020-03-15 21:51:25

问题

因最近尝试实现客户端与服务端分离,服务端只提供接口,客户端用html+js实现,分成两个独立的项目部署,因项目是个人项目,客户端展示不考虑使用像Angular、Vue、Native这种前端框架实现,于是全部使用静态页面实现,请求数据用ajax,在开发的过程中,就遇到了页面之间传值的问题。

解决方法

post提交表单跳转的方式肯定不行了,因服务端并不处理这些请求参数,连到达客户端的机会都没有,此时只能考虑get方式了,因get方式参数在url上,跳转后的页面肯定能获取到。还有一种思路,就是将参数存到一个公共的地方,页面都可以获取到,按这两种思路,总结了如下的解决方法。

1、get方式,url携带参数

可以通过window.location.search获取url上的参数。如下面的示例。

a.html
  1. <a href="./b.html?a=1&a=2&username=zhangsan&password=123&=">跳转</a>
b.html
  1. <script type="text/javascript" src="./js/getUrlParam.js"></script>
  2. <script>
  3. var a = UrlParam.paramValues("a");
  4. console.log(a);
  5. </script>
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. }();

此处代码参照:

http://blog.csdn.net/caoyuan10036/article/details/7227214

cookie能够存储少量数据到客户端的磁盘中,特定的网页之间是可以共享cookie中的数据。

a.html
  1. <script type="text/javascript" src="./js/jquery.min.js"></script>
  2. <script type="text/javascript" src="./js/jquery.cookie.js"></script>
  3. <script>
  4. $.cookie("a","12");
  5. </script>
b.html
  1. <script type="text/javascript" src="./js/jquery.min.js"></script>
  2. <script type="text/javascript" src="./js/jquery.cookie.js"></script>
  3. <script>
  4. var param = $.cookie("a");
  5. console.log(param);
  6. </script>

此处使用了jquery.cookie.js,具体用法可参照此篇文章:

http://blog.csdn.net/csdn_ds/article/details/78022177

3、window.open和window.opener之间传值

window.open可以打开一个新的页面,在新的页面中可以通过window.opener获取父页面的窗口对象,从而可以获取父窗口中的参数。

a.html
  1. <button id="open">打开新的页面</button>
  2. <script>
  3. $('#open').click(function () {
  4. window.open('./b.html')
  5. })
  6. </script>
b.html
  1. <script>
  2. var content = window.opener.document.getElementById("open").innerHTML;
  3. alert(content);
  4. </script>

4、h5技术,window.localStorage存储数据

在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。此方法类似cookie,将数据存在一个公共的地方,实现页面之间传值。

a.html
  1. <input type="text" name="username" />
  2. <input type="button" name="" value="post" οnclick="set()"/>
  3. <script>
  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. </script>
b.html
  1. <script>
  2. var value = localStorage["name"];
  3. alert(value);
  4. </script>

总结

对于不同的解决方法,都有优缺点

1、url携带参数

优点:取值方便,可以跨域,利于页面分享,没有环境限制。

缺点:url携带参数值的长度有限制。

优点:可以在同源内的的任意网页中访问,存储数据的周期可以自由设置。

缺点:有长度限制。

3、设置窗口之间的父子关联关系

优点:取值方便.只要window.opener指向父窗口,就可以访问所有对象.不仅可以访问值,还可以访问父窗口的方法.值长度无限制。
缺点:两窗口要存在着关系.就是利用window.open打开的窗口。不能跨域。

4、h5技术,window.localStorage存储数据

优点:储存空间大,有5M存储空间。

缺点:不是所有浏览器都支持。

个人倾向第一种方式,主要是自己做的网页可以分享,在任何的地方都可以打开,其他的方式都有环境的要求。如果是做大型项目,架构是实现客户端与服务端的分离,建议还是引入客户端框架,框架实现了路由、参数的传递、以及安全问题,可以大大的提高开发效率。

————————————————
版权声明:本文为CSDN博主「晓梦_知行」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/csdn_ds/article/details/78393564

 
0
留言
登录博客到个人信息里绑定邮箱可及时收到回复哦!去绑定
正在加载...
有疑问发邮件到:suibibk@qq.com
Copyright :  随笔博客     备案号:粤ICP备17055068