@羯瑞
HTML5存储
cookies
- 大小限制4K
- 发送在http请求头中
- 子域名能读取主域名的cookies
本地存储 localStorage sessionStorage
- 大小限制5M（注意超出限制处理，超过时setItem会抛出异常）
- 可以存储数组、json、图片（canvas编码base64）、脚本、样式文件
- 子域名之间不共享
离线存储 Application Cache
<html manifest="manifest:appcache">- 移动端大多数都兼容
- 如果有更新必须修改服务端manifest文件
- 页面数据更新 需要二次更新才能拿到最近的数据。有缓存读取的是最后一次数据
- 更新是全局性的，无法单独更新某个文件
- 链接后面带参数是缓存的是分别缓存的：chenrf.com/?a=1 不同于 chenrf.com
- 适用于：单页面，数据不常更新的，实时性不高的，离线webapp
indexedDB本地数据库
indexedDB 是一个本地数据库，该数据库是一种存储在客户端本地的 NoSQL 数据库，它可以存储大量的数据。
一个网站可以有多个 indexedDB 数据库，但每个数据库的名称是唯一的。我们需要通过数据库名来连接某个具体的数据库
其他的本地存储（可以忽略）
- userData 仅支持IE浏览器，大小现在64K
- google Gears 版本12.0以前
absolute技巧
- 无依赖跟随实现；去relative化，设置元素absolute，不设置top、right、left、bottom只设置margin值；
- 元素居中：
position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;IE7+支持 - 在移动端的布局使用，top + footer 内容区块 overflow:auto自适应显示滚动条
.content { position: absolute; left: 0; right: 0; top: 48px; bottom: 53px; overflow: auto; }
overflow技巧
- 无论什么浏览器，滚动条均来自
<html>而不是<body> - 谷歌浏览器document.body.scrollTop,其他浏览器document.documentElement.scrollTop
- 最后元素的padding-bottom缺失问题，谷歌浏览器正常-其他浏览器缺失
- 获取滚动条宽度(大都17PX)，外层宽度 - document.getElementById('chen').clientWidth
- 解决浏览器高不足滚动条显示&出现的不友好：padding-left:calc(100vw - 100%);tips:100vw浏览器宽度
- ios原生滚动回调效果：-webkit-overflow-scrolling:touch
- overflow:hidden + 锚点定位可以实现切换效果
<div class="box" style="overflow: hidden;"> <div class="list" id="one">1</div> <div class="list" id="two">2</div> <div
