1. Web客户端数据存储 Client Side Storage

2. 什么时候，需要在客户端数据存储？

3. 行为记录

4. 类目

5. 相对稳定的数据

6. and……

7. But, How?

8. Cookie HTML5 Dom Storage Flash SharedObject (local) UserData Google Gears JavaFX, Silverlight……客户端

9. Cookie

10. Why Cookie ? 所有浏览器都支持 每次HTTP请求都会自动附带 地球人都会用 服务器端可控制

11. Why not Cookie? 每次HTTP请求都会附带在头部 4KB容量限制，不可增加 不安全

12. UserData

13. UserData Windows+IE 尺寸限制根据安全域不同而不同，单个文件64K-512K，总数640K-10M 位置：C:ocuments and Settings户名serDataC:ocuments and Settings户名pplication Dataicrosoftnternet ExplorerserData

14. 基本语法 XML：<Prefix: CustomTag id=sID style=”behavior:url(‘#default#userData’)” /> HTML/CSS： <ELEMENT style=”behavior:url(‘#default#userData’)” id=sID> Script： object.addBehavior(“#default#userData”)object.style.behavior = “url(‘#default#userData’)”

15. 属性： expires —— 设置或者获取 userData behavior 保存数据的失效日期。 XMLDocument —— 获取 XML 的引用。 方法： getAttribute() —— 获取指定的属性值。 load(object) —— 从 userData存储区载入存储的对象数据。 removeAttribute() —— 移除对象的指定属性。 save(object) —— 将对象数据存储到一个 userData存储区。 setAttribute() —— 设置指定的属性值。

16. #code-example-userdata

17. <HTML5>

18. 5M(FF等) - 10M(IE) 每空间 HTML草案阶段，各个浏览器实现不同

19. HTML5: DOMStorage http://www.quirksmode.org/dom/html5.html

20. var support = ''; if ('localStorage' in window) support += 'Local Storage; '; if ('globalStorage' in window) support += 'Global Storage; '; if ('sessionStorage' in window) support += 'Session Storage; '; if ('openDatabase' in window) support += 'Database; '; document.write(support);

21. // 获取文本框 var field = document.getElementById("field"); // 在刷新后，重新取得保存的值 if ( sessionStorage.autosave ) { // 恢复自动保存的文本 field.value = sessionStorage.autosave; } // 每秒钟保存一次文字 setInterval(function(){ // 保存 sessionStorage.autosave = field.value; }, 1000);

22. Google Gears

23. 无限空间 SQLite 需安装Gears，支持IE、FF、Chrome

24. FlashSharedObject Flash

25. 100K – 无限 永久存储 需安装 Adobe Flash6+ 跨浏览器 安全域划分基于swf文件

26. YUI Storage

27. JStore http://eric.garside.name/docs/jstore.html

28. Q&A

29. Thank you!