html5 中的 webstorage赵锦江自我介绍• 赵锦江• Tags: maxthon/html5/football/music• Weibo: @ 勾三股四主要内容• 网页数据存储• Webstorage– Localstorage– Sessionstorage– Storage 事件• 实战网页数据存储早期的唯一选择： cookies• 容量有限且很小• 不便于复杂数据的管理• 附带在每一次网络请求之中– http://www.w3school.com.cn/js/js_cookies.aspHtml5 中的更多选择• Webstorage– Key-value 相对简单易用– 今天介绍的重点• Web sql database– 用 sql 访问本地数据库• Indexed db– 存取 json 数据的数据库• File system– 存取文件• Application cache– 缓存网络资源LOCALSTORAG本地存储window.localStorage• 永久保存• 以域名为单位进行数据划分• 同域下的所有页面一起共享这些数据• 对数据的改动会导致同时共享这些数据的其它页面触发 storage 事件• 具体用法稍后介绍SESSIONSTORAGE会话存储window.sessionStorage• 数据随会话产生和消失• 以每个“顶级页面”为单位– top-level browsing context• 在所有同域的“子页面”中共享这些数据– 同样的，对数据的改动会触发 storage 事件• 为所有同域的以下“顶级页面”拷贝这些数据– 通过超链接新打开的页面– 通过脚本新打开的页面 ( 比如 window.open 等方式 )操作方式window.localStoragewindow.sessionStorage两者的 js 接口一致Key 和 value 都是字符串类型基本操作 ( 以 localStorage 为例 )• localStorage.getItem(key)– 通过关键字取值• localStorage.setItem(key, value)– 为关键字赋值• localStorage.removeItem(key)– 通过关键字删值简化操作 ( 以 localStorage 为例 )• localStorage.a = 1• localStorage['a'] = 1– 为关键字 a 赋值• localStorage.a– 取关键字 a 的值• delete localStorage.a– 删除关键字 a高级操作 ( 以 localStorage 为例 )• localStorage.clear()– 清除所有关键字的值• localStorage.length– 所有关键字的个数• localStorage.key(n)– 按“一定顺序”，返回第 n 个关键字storage 事件• 在 localStorage 或 sessionStorage 发生改变的时候，让其它共享该数据的页面触发storage 事件事件对象window.onstorage = function (e) {e.key; // 关键字e.oldValue; // 改...
