Extjs中GridPanel慎用cookie保存状态

最近在一个项目中,客户要求业务列表可定制(显示/隐藏、宽度设置、排序等),由于项目前期没有考虑对定制的规划,所以没考虑使用数据库或XML保存列表的状态属性来实现定制,而去寻找最小改动的方式来满足客户要求。

几经搜索,找到Extjs的GridPanel使用cookie可以很容易实现列表定制的保存,进行如下两步设置即可:

1.开启cookie
Ext.state.Manager.setProvider(new Ext.state.CookieProvider({expires: new Date(new Date().getTime()+(1000*60*60*24*365))})); //设置过期时间,这里设置一年


2.给相应的GridPanel添加两个参数
stateful:true, //true为启用cookie保存grid状态
stateId:"xxxx-cookie-grid" //这将被用于生成cookie的id


  经过上面两步设置后,定制功能实现了(在开启cookie的同个浏览器下),接着使用这种方式改造了项目中的其它业务列表、报表列表等。

  起初,由于不了解浏览器对cookie的大小等限制,且未对使用定制的列表同时进行测试,所以没有发现问题(有时清除浏览器缓存,将cookie一并清除了);

  后来同事在测试时,反馈在FF下整个系统都是空白页,连登录页都是空白(且有时在后台报出header之类超出服务器处理限制)。不知道是什么原因,让同事直接清空浏览器缓存、cookie后重试,系统又可以正常访问了。

  接着考虑是不是cookie的问题,上网搜索得知知浏览下cookie的限制: http://tipx.iteye.com/blog/849244
  ( 很无齿的转载了,备忘用。)

  进一步验证问题确实是出在cookie身上。打开FF的cookie查看窗口,找到系统所属的域,复制出其中一个grid所存储的cookie(cookie的名称是使用stateId加上前缀生成的,各浏览器应该类似),存为文本并查看大小,差不多1kb,而基本浏览器对一个域的大小限制为4kb,而项目中有远远不止4个列表使用了cookie存储状态。

  接着清空FF的cookie(清空当前域的即可),重新打开项目,定制一个grid、两个grid、三个grid,定制完刷新各页面皆正常;当定制生成第四个grid的cookie后,刷新项目的页面,页面全部变成空白,打开FF的cookie查看窗口,找到项目对应的cookie,删除其中一个grid的cookie后,再次刷新项目页面,页面恢复正常。

----------------------传说中腹黑的分害线---------------------
综上所述,由于Extjs的GridPanel在保存信息到cookie时,要保存的内容相对比较多(比如包含了:列索引、排序、显示/隐藏,还要算上字段个数等),很容易超出浏览器的cookie限制,所以GridPanel自带的cookie保存状态功能虽然好用,不过还是慎用为好。

你可能感兴趣的:(JavaScript,xml,浏览器,ext,Blog)