cookie插件下载地址:http://pan.baidu.com/s/1i4tpsET
在web项目开发过程中,会有页面的跳转,部分跳转需要加载数据,这里就存在不同的解决方案,其中之一就是cookie携带参数到跳转的页面。其他的解决方案只做思想的说明,不详细说明,cookie方式实现将在本博客中具体说明。
方式一:通过将参数拼接在链接后,发送跳转请求,在工程中将请求需要的参数放到request域中,然后跳转到目标页面,在目标页面通过request域获取参数数据,通过获取的参数再向后台发送请求,获取需要加载的数据,将数据加载到页面。这种方式需要在链接后面拼接参数,参数较少还不是很麻烦,要是参数较多就存在问题,毕竟搜索框中链接的长度是有限的,另外就是参数过于的暴露,不是很友好的方式。
方式二:在方式一的基础上,在跳转的过程中,就将请求的最终数据封装到域中,而不是将参数保存到域中,减少一次请求,这种方式同样具有方式一的缺点。不算是友好的方式。
方式三(重点):cookie实现请求数据的封装
第一步:将需要使用的参数存储到cookie中,然后直接跳转到目标页面
第二步:在目标页面从cookie中取值,取出需要的参数,将参数存储到页面的全局变量中
第三步:发送ajax请求,带上参数,获取页面需要加载的数据,将数据显示出来
第四步:定义一个页面加载完毕事件,在页面加载结束后,将cookie携带的参数清除
优点:
1、cookie携带数据,不需要在链接中拼接参数;
2、在目标页面加载结束后,将cookie清除,可以相对保证数据安全,在整个操作过程中cookie存在的时间很短;
3、cookie清除后,可以防止cookie共享数据的污染,如两个页面的cookie对应的path属性相同且变量名相同,就会导致修改一个页面的cookie参数,另一个页面的cookie参数也会变化,造成数据污染;
4、cookie清除后,可以防止cookie数量超过限制,一个域名下存储的cookie是有限的;
缺点:
1、由于参数保存在页面的全局变量中,会造成刷新页面,数据丢失问题,但是这个问题并不是太大,因为现在大多都是采用异步请求局部刷新的方式,一般不会导致数据丢失;
2、不同的浏览器存在cookie的存储差异,可能会存在问题,但是这个问题也不大,因为主流浏览器都能完美支持,不会出现这种情况。
代码的实现:
1、 jQuery自身是没有cookie的保存、取出、删除的功能,需要自己添加jQuery的cookie插件,这里提供给大家。
<script src="https://code.csdn.net/snippets/1557059.js"></script>
2、 在页面中存储cookie的值
默认路径存储cookie的值
[javascript] view plain copy
$.cookie("test","aabbcc");
自定义路径存储cookie的值
[javascript] view plain copy
$.cookie("test","aabbcc",{path: "/web/test/list"});
注意这里设置的路径,在取cookie值的页面中,页面要是这个路径的子路径或者相同路径,否则无法取到cookie中的值
3、在页面中取出cookie的值
[javascript] view plain copy
var cookie_value = $.cookie("test");
cookie_value就是cookie中存在的值
4、在页面删除cookie值
页面加载结束清除cookie值
<script src="https://code.csdn.net/snippets/1557048.js"></script>
页面关闭清除cookie值
<script src="https://code.csdn.net/snippets/1557051.js"></script>
上面的两种清理方式其实是一样的,主要是相说明这两个事件。
这些都是在开发过程遇到的问题,和团队讨论的结果,希望对博友们有所帮助。有什么问题记得留言哦,大家可以一起讨论。
本文转自 兴趣e族 51CTO博客,原文链接:http://blog.51cto.com/simplelife/1740053