项目cookie优化之cookie数量限制和多页面共享污染数据问题

简介:

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

相关文章
|
4月前
|
存储 JavaScript
uniapp数据点击的时候将数据存入同一个本地存储中并且最大限度5个
uniapp数据点击的时候将数据存入同一个本地存储中并且最大限度5个
66 0
|
6月前
|
存储
Cookie的工作机制
Cookie的工作机制
21 0
|
6月前
|
存储 缓存 算法
如何获取浏览器定位信息存储到浏览器缓存中?
如何获取浏览器定位信息存储到浏览器缓存中
56 0
|
6月前
|
应用服务中间件 数据安全/隐私保护
session 生命周期和经典案例-防止非法进入管理页面
session 生命周期和经典案例-防止非法进入管理页面
69 0
|
10月前
|
存储 安全 JavaScript
网络基础 cookie详解
网络基础 cookie详解
84 0
|
数据库 Windows 容器
如何设置IIS程序池的回收时间,才能最大程度的减少对用户的影响?
如何设置IIS程序池的回收时间,才能最大程度的减少对用户的影响?
187 0
|
存储 应用服务中间件 数据安全/隐私保护
【JavaWeb】会话跟踪技术Cookie与Session原始真解(上)
文章目录 1 什么是会话? 2 Cookie技术 2.1 Cookie简介 2.2 Cookie的理解与创建 2.3 服务器获取Cookie与Cookie的修改 2.4 Cookie的生命控制与生命周期 2.5 Cookie有效路径Path设置 3 Session会话技术 3.1 初探Session 3.2 Session的创建、获取与基本使用 3.3 Session的生命控制与生命周期 3.4 如何理解Session底层是基于Cookie实现的?
【JavaWeb】会话跟踪技术Cookie与Session原始真解(上)
|
存储 编解码 应用服务中间件
【JavaWeb】会话跟踪技术Cookie与Session原始真解(下)
文章目录 1 什么是会话? 2 Cookie技术 2.1 Cookie简介 2.2 Cookie的理解与创建 2.3 服务器获取Cookie与Cookie的修改 2.4 Cookie的生命控制与生命周期 2.5 Cookie有效路径Path设置 3 Session会话技术 3.1 初探Session 3.2 Session的创建、获取与基本使用 3.3 Session的生命控制与生命周期 3.4 如何理解Session底层是基于Cookie实现的?
【JavaWeb】会话跟踪技术Cookie与Session原始真解(下)
|
数据采集 JavaScript 前端开发
前后台分离使用cookie判断用户状态以及传递参数
在之前学习servlet的时候,当时做的小网站需要登陆并且判断信息,当时使用session传值,使用fitter过滤判断,当时感觉哇,session咋这么好用,cookie是啥玩意,还不方便。
130 0
|
存储 移动开发 前端开发
cookie、localStorage和sessionStorage 三者之间的区别以及存储、获取、删除等使用方式
写在前面:前端开发的时候,在网页刷新的时候,所有数据都会被清空,这时候就要用到本地存储的技术,前端本地存储的方式有三种,分别是cookie,localstorage和sessionStorage ,这是大家都知道的。本文的主要内容就是针对这三者的存放、获取,区别、应用场景。有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家。 本文首发于我的个人blog:obkoro1.com 使用方式:很多文档都是说了一大堆,后面用法都没有说,先要学会怎么用,不然后面的都是扯淡,所以这里我先把使用方式弄出来。 cookie:保存cookie值: var dataCooki
193 0
cookie、localStorage和sessionStorage 三者之间的区别以及存储、获取、删除等使用方式