Extjs中GridPanel慎用cookie保留状态

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保存状态功能虽然好用，不过还是慎用为好。