简易而又灵活的Javascript拖拽框架(五)

一、开篇
    在写了前几篇拖拽过后,有不少朋友留言说如果将拖拽结果持久化将会更好。在了解了Javascript对Cookie的操作还有一点JSON知识过后,修改了上一篇文章的代码,可以将结果保存在客户端Cookie,每次打开页面就可以载入上次拖拽的数据,得到上次的拖拽布局。

    查看示例

二、原理

    首先添加了两个方法:setCookie和getCookie,分别用来添加/修改Cookie和读取Cookie,这些教程太多了,就不多说了。

    然后来说说打开网页到关闭网页的整个过程:

1、打开网页的时候,会通过getCookie去读取名为“XDrag”的Cookie,如果用户是第一次打开这个页面(或者是禁用、手动删除了Cookie,总之客户端没有对应的Cookie的时候),则会有一个默认的配置;

2、网页的html元素的结构也有所变化,以前是直接把拖拽的模块直接放置在对应的页对应的列,现在是统一放在tempContainer这个div中,通过读取的配置来将tempContianer里面的模块“分发”到配置指定的页制定的列;

3、注册window.onbeforeunload事件,在页面unload之前保存配置到Cookie。保存的方法就是遍历每一页的每一列的每一个模块,将每个模块的id记录下来,根据页面和列和id来构造一个JSON字符串(因为Cookie保存的值就是字符串),这样读取的时候只需要用eval即可得到保存的数据的对象,这是JSON的优点。

下面是这个JSON字符串的结构,嵌套了3层array


 附件: 您所在的用户组无法下载或查看附件

jsonObj.pages得到pages数组

jsonObj.pages[0]得到page1的列的数组

jsonObj.pages[0][0]得到page1的第一列的所有id的集合

三、代码

      下面是几个添加的几个主要的方法:

setCookie和getCookie

Code


遍历布局保存到Cookie

Code


从Cookie读取保存的布局

Code


四、示例下载

      点此下载示例:
 附件: 您所在的用户组无法下载或查看附件





(文/LongWay  出处/博客园)

 感谢原创者的辛勤劳动,希望对您有所帮助,转载请注明原出处。
 您可能对 [javascript] 的这些文章也感兴趣:

JavaScript拷贝继承法的应用
js事件列表
Javascript制作浮动的工具条
磁盘浏览器
在线编辑器集锦
用javascript实现select的美化
js入门实例の构造函数\方法的定义和调用\原型对象
编程学习方法漫谈
java是什么东东?
在网页里添加Web Live Messenger对话框