项目中想加入 webStorage 减小网络开销，提高加载速度，增强用户体验，想系统的看下 web storage方面的文章！
Web Storage API
参考文章
早上在几个前端同事的桌子上翻到的 HTML5高级程序设计 相关的基础知识看第9章补充的。然后搜索下网络知识：
>不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。
实践
参考 上面的文章 5 对 所有的js 和 css 进行localStorage 缓存，每个缓存文件的链接可以通过v=new Date().getTime() 进行细化的版本控制，需要更新的添加 参数，不需要的不更新
Next
- localStorage 本地存储 的require(‘js’) 模式的调用
20160401 更新
关于 application manifest
2016-04-18
疑问
1. application cache 数据量的大小？
不像localStorage 多数资料给出明确的大小是 5M, 查询的资料中很少提及 application cache 的大小，目前找到的文章中形成了两张说法：
-
网站的缓存数据量不得超过 5 MB。不过，如果您要编写的是针对 Chrome 网上应用店的应用，可使用 unlimitedStorage 取消该限制
[HTML5]Application Cache使用中需要注意的事项
Safari桌面浏览器(Mac以及 Windows)没有限制
Mobile Safari限制为10MB
Chrome限制为5MB
Android浏览器对应用程序缓存大小没有限制
Firefox桌面版有无限的应用程序缓存大小
Opera的应用程序缓存大小可以由用户管理，但有一个默认大小50MB
各种浏览器的的 数据量的大小是不一样的。查看 html5 [Application cache API 官方的文件](https://www.w3.org/TR/2011/WD-html5-20110405/offline.html#disk-space)，也是支持各个浏览器自己定义的 允许的disk space 大小，甚至允许用户管理。
_
_
最终的方案 ：通用的application cache disk space 限制在5M _
_
_
_
tip: _
_
chrome://appcache-internals/ 可以查看chorme 中 application cache 的使用大小，亲自证实不止 5M
2. 想缓存的文件太多了，手写很麻烦，怎么办呢？
- 详解HTML5中的manifest缓存使用 中使用 grunt-manifest自动生成manifest文件。因为我的构建工具使用的是gulp 所以去npmjs 搜索了gulp-manifest，感兴趣的看官方文档吧，很详尽！
3. js控制 缓存文件的更新
参考：应用缓存初级使用指南
// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Browser downloaded a new app cache.
// Swap it in and reload the page to get the new hotness.
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
} else {
// Manifest didn't changed. Nothing new to server.
}
}, false);
}, false);
4. 注意事项
- 站点离线存储的容量限制是5M
- 如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存
- 引用manifest的html必须与manifest文件同源，在同一个域下
- 在manifest中使用的相对路径，相对参照物为manifest文件
- CACHE MANIFEST字符串应在第一行，且必不可少
- 系统会自动缓存引用清单文件的 HTML 文件
- manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
- FALLBACK中的资源必须和manifest文件同源
- 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
- 站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
- 当manifest文件发生改变时，资源请求本身也会触发更新
- 备用项如果发生命中,则也会被缓存.
- 明示项和备用项优先级高于白名单.
- 白名单使用通配符”_
“. 则会进入白名单的open状态. 这种状态下.所有不在相关Cache区域出现的url都默认使用HTTP相关缓存头策略.
- 白名单使用具体的前缀匹配或更具体的URL,则都属于blocking状态.这种状态下,白名单所匹配的,非Cache区域出现的URL,与open的_
匹配的结果一致,但是不在白名单中,又不在整个manifest的资源,会block.也就是访问，加载不能.
阅读列表 [2015.02.22 - 2015.02.28]
1. npm构建工具
使用的gulp 的项目构建工具，有时间可以试下直接npm 构建。webpack 中可以使用npm 管理js 包依赖管理
微博上的相关讨论： 入口