前言:
保存用户状态的信息技术除了上一篇博文中讲到Cookie技术,还有两种技术就是隐藏表单域和查询字符串的方式,这两种技术其实在原来的学习我们都用过了解,但是不是很系统,所以将他们三者放在一起可以印象更加深刻。
内容:
一:相关介绍
1.隐藏表单域就是在html中添加一个隐藏域(在网页显示的时候不可见)用这个隐藏域的value属性来保存数据。
首先应该在html网页上添加:
<form id="form1" name="form1" method="post">
<!--其中通过hiddenField.value值去访问隐藏域中所保存的东西-->
<input type="hidden" name="hiddenField" value="你好!" />
</form>
其次在js脚本中添加相应的代码访问value值
//跨浏览器添加事件
function addevent(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn);
} else if (obj.attchEvent) {
obj.attchEvent('on' + type, fn);
}
}
addevent(window, 'load', function () {
var form1 = document.getElementById('form1'); //获取表单
//1.显示隐藏表单的内容
function showValue() {
var hdValue = form1.elements[0].value; //获取隐藏表单的value值。
alert(hdValue);
}
//2.修该隐藏表单中的内容
function modifyvalue() {
form1.elements[0].value = '我已经修改过了'; //通过赋值可以进行修改表单的内容。
modifyvalue = form1.elements[0].value
alert(modifyvalue);
alert(form1.elements[0].value);
}
modifyvalue();
})
2.查询字符串是通过url地址在不同的网页之间传递参数。通过js脚本中location对象的href属性将url字符串取出,然后利用javascript的字符操作方法去操作其中的值,从而达到少量数据的目的。
//从演示页面上链接到test.html网页上,传递带查询字符串的url
<form id="form1" name="form1">
<a href="http://localhost:43072/29%20cookie/test.html?user=12">转向【http://localhost:43072/29%20cookie/test.html?user=12】</a>
</form>
test.html的代码:
//功能:利用javascript代码获取演示页面传递来的url,并且取出查询字符串。
form id="form1" name="form1">
<input type="button" name="showString" value="查询字符串的值"/>
</form>
js代码域:
//跨浏览器添加事件
function addevent(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn);
} else if (obj.attchEvent) {
obj.attchEvent('on' + type, fn);
}
}
addevent(window, 'load', function () {
var fm = document.getElementById('form1');
var button = fm.elements['showString'];
addevent(button, 'click', function () {
showStr(); //调用以用来获取字符串。
})
})
//获取url中字符串
function showStr() {
var str = location.href;
var len = str.length;
var chStr = str.split('?');
alert('查询的字符串的值:' + chStr[1]);
}
**3.Cookie的相关介绍请看我的博文【Javascript】——Cookie安全机制
二:三者之间的比较
Cookie | 隐藏表单域 | 查询字符串 | |
有效时间 | 长期 | 回话期间 | 回话期间 |
存储容量 | 最大保存4kb | 没有限制 | 没有限制 |
浏览器支持情况 | 大部分支持 | 全部支持 | 全部支持 |
服务器支持 | 不是所有的都支持 | 所有服务器支持 | 所有服务器支持 |
系统开销 | 开销大,存储在硬盘中 | 小,内存中 | 小,内存中 |
数量限制 | 有限制 | 无限制 | 无限制 |
总结
通过对比分析,虽然他们各有各的优势和不同,但是他们之间不是替代关系,而是互补的关系。在具体的情况下需要我们去具体的分析,不能一概而论。在今后的学习过程实战中一定会更加深入了解!