[TOC] ## 前言 web存储对于优化体验，保存用户数据具有重要的作用。本教程所指的web存储是指广义的。而存储本身是为了加快下一次的访问速度以及避免一些数据请求。 ## http缓存 ### 新鲜度 新鲜度，有时候我们也称为ttl(生存时间)。最简单的方式就是使用报头，缓存代理会被告知该资源保留多长时间。我们可以使用expire报头，一般的静态网站，我们都会建议比较长的时间。 这样做的目的是所谓的静态资源，比如css和js，如果可以的话，不用再次获取。 ### 验证 验证为缓存代理提供了一种无须请求完整资源就能确定旧的缓存是否可用的方法。浏览器可以发出一个包含if-modified-since的报头请求，如果服务器上的资源没有发生改变，就会返回304 not modified的响应，这样浏览器就会使用缓存中已经存在的文件，而不是重新获取。 另一个验证功能是etag,是一种唯一的标识符，一般通过哈希算出，只需要简短的字符，能在没有日期信息的情况下验证缓存是否与服务器文件相符合，请求代理会创建一个带有附加条件的请求，并加入if-modified-since，它包含etag.如果服务器的内容包含etag与客户端的匹配，那么会返回304。 验证缓存需要在服务端与客户端进行一个往返，虽然比下载文件好，但是可以的话，还是设置文档有效期更好，避免请求，浏览器也不会去验证 ### 失效 某些操作执行后会导致缓存项失效，最常见的就是创建相同url的非get请求。 ### 正常的缓存行为 如果没有写报头，什么都没做情况下，大多数浏览器有一个最大缓存大小，当缓存达到这个大小的时候，就会从缓存中删除最近使用较少的项目。假设不考虑缓存报头，浏览器可能缓存你完全不想保存的内容。 ## 为移动优化 * 移动端ios浏览器在你关闭浏览器或者关掉进程的时候，缓存可能就被清掉，而安卓浏览器一共的缓存只有2.5m，所以这种情况下，设置头信息更为重要。 ## webStorage ### 特性 除了cookie之外，为我们提供了另一种持久化数据的存储方式，与cookie不用，网络存储为每个域提供了5m的键值对的存储空间，在ios上使用utf-16的，每个字符需要两倍多的字节，所以ios实际存储量为2.5m. * 具体语法以及介绍参考：[h5websSroage教程](http://www.kancloud.cn/eagles/codingrules/315244) ## 应用缓存