纯html页面之间传递参数

方法有 两 种:

  1. 通过 url 传递
  2. 通过本地存储

(一)通过url传递

纯html页面之间的传值可以通过url后面的参数进行比如:

b.html?teacher=xx&time=xxx

首先从a.html到b.html需要一个跳转方式,比方说在a.html页面里面你有一个链接:

<a href="b.html" id="toPageB">跳转到b页面</a>

剩下的就好办了,依次取得你需要的参数,然后修改页面url:

var dataFromLi=[$("#Teachername").text(),$("#Credit_hour").text()];
$("#toPageB").attr("href","b.html?data="+dataFromLi);

然后在b.html页面解析url,获取参数。如何根据url获取参数:

window.location.search 会返回所有地址栏从“?”开始的字符串。获取某个参数值可以通过正则,下面是一个简单的获取参数的函数:

function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}

如果你采用jQuery,可以用更简单的办法:

$.url().param('data');
可以用以下专业第三方库进行获取值操作:
uri.js
parseURL.js


(二)通过本地存储
Web Storage是目前得到支持最广泛的HTML5本地存储规范;
HTML5 Storage的使用非常简单: 
  1. var foo = localStorage.getItem("bar");  
  2. // ...  
  3. localStorage.setItem("bar", foo);  

你也可以写成下面这样: 
  1. var foo = localStorage["bar"];  
  2. // ...  
  3. localStorage["bar"] = foo;  

如果要将某个key从存储空间删除,可以调用removeItem: 
  1. localStorage.removeItem('foo');  


你也可以像遍历数组那样遍历存储的所有键值对象: 
  1. for(var i=0; ivar key = localStorage.key(i);  
  2.     console.log(key + ":" + localStorage[key]);  
  3. }  

如果你的程序需要在不同页面访问同一个值,你可能需要了解这个值是否已经被其他页面改变了,这可以通过向浏览器注册storage事件来实现: 
  1. window.addEventListener('storage', function(e) {  
  2.     console.log(e.key + "'s value is changed from '" +  
  3.         e.oldValue + "' to '" + e.newValue + "' by " + e.url);  
  4. }, false);  
  5.   
  6. //A页面  
  7. localStorage['foo'] = 'bar';  
  8.   
  9. //B页面  
  10. localStorage['foo'] = 'newBar';  

这时你应该会在A页面的Console中看到: 

foo’s value is changed from ‘bar’ to ‘newbar’ by http://localhost/test.html 

要注意的是,storage事件仅仅只是通知你某个键对应的值已经发生了改变,你没有办法在回调中阻止这个改变发生。 

HTML5 Storage看起来不错,那它有没什么缺点呢?好问题。要说HTML5 Storage的缺点,唯一的问题就是它默认的QUOTA只有5MB,并且你没办法通过程序自行或是提示用户来增加存储空间。唯一的办法就是用户自己打开 浏览器的设置,并手动修改QUOTA的大小,如果超出了5MB的限制,你将会遇到一个“QUOTA_EXCEEDED_ERR”的错误。 
  • 3
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值