客户端存储与计算.docxVIP

为什么要把数据存储在客户端 性能 Cache资源 应用的离线功能 用户隐私数据 其他原因 目前主要的存储方式 ? Cookie Flash Share Object User Data Dom Storage W Silverlight Google Gears Open Database Application Cache ... 主流浏览器的支持情况 注：Y 支持 N 不支持 y 需要安装插件 Cookie 每个 cookies的大小不能超过4096字节 一般至多允许每个网站使用 20个 一些浏览器要求所有网站总共的cookie数不能超过300个 不能跨浏览器 每次请求都会把数据发送到服务器端  浏览器支持最全面 和服务器交互方便 写cookie得拼RP Cookie Flash Share Object Key‐Value存储方式 默认提供了100k，可向用户申请更大的空间 浏览器支持情况良好 跨浏览器  要求浏览器安装Flash插件 Flash Player 6+ 必须在页面中加载一个flash，而且得保证flash可 以正常工作 Flash Share Object Flash Share Object public class Fso extends Sprite { private var so:SharedObject; public function Fso() { so=SharedObject.getLocal(wenwen); ExternalInterface.addCallback(set,_set); ExternalInterface.addCallback(get,_get); } private function _set(_key:String,_value:String):void { so.data[_key]= _value; so.data.push(); } private function _get(_key:String):String{ return so.data[_key]; } } Flash Share Object Demo User Data User Data ? 单个页面提供 每个 提供 128K domain 1024K IE5.5+浏览器支持 不能跨浏览器 只能在相同路径下的不同页面间共享 User Data Demo Dom Storage 三种形式 sessionStorage 、localStorage和globalStorage globalStorage是与localStorage类似的早期实现 sessionStorage 会话结束时就会销毁 localStorage是持久化存储 sessionStorage和localStorage总共提供了10M的存储空 间 Dom Storage 对 接口的定义 W3C Storage Dom Storage 与 调用方法的差异 localStorage globalStorage Dom Storage Demo W ? 原生对象的一个属性，所有浏览器都支持 Window 提供了2MB~~60MB的空间 只有在链接跳转时才能传递数据 可以跨页面，跨域 可以在页面的domready事件之前使用 不能够持久化 W Demo Silverlight ? 提供了一个 独立存储的 IsolatedStorageFile API 默认为每个应用提供了1M的空间 跨浏览器 需要安装Silverlight插件 Silverlight Demo Google Gears Google Gears 基于 SQLite 默认为每个应用提供了1M的空间，可向用户申请更大的空间 需要安装GoogleGears插件 支持全文检索 Google不再打算支持此技术了 Google Gears Demo Google Gears Open DataBase ? 正宗的存储方案 HTML 5 每个域名提供5MB的存储空间 SQL 语言的支持 事务支持 Open DataBase Demo Application Cache 可以Cache UI 文件（js,css,html,img..） 应用离线功能实现的基础 html manifest=”foo.manifest” text/cache‐manifest 当前支持的浏览器：Firefox 、Chrome、Safari Application Cache Demo 客户端计算 设计之初 Javascript 现在 客户端计算 浏览器单进程 多进程 JavaScript单线程 多线程 JavaScript运行在多个解释引擎下 JavaScript更多的时候是和DOM、BOM在协同工