localStorage cache

工作中，为了按时完成项目，都是碰到问题一一解决，没有系统的进行过学习和总结。

这也是正常的，毕竟，工作是必须要先完成的。可是，系统的学习也很重要，今天就把localStorage cache 总结一下，以后再遇到这些问题，也知道如何查资料解决。

localStorage

首先呢，这个是H5才有的。通过localStorage可以将数据存储在客户端（localstorage store data but not pages），并且可以通过接口来调用。之前浏览器只能将数据存储在cookie中，但是cookie很小且有很多限制（每次请求都会传递）。在客户端JS里，发送异步请求前先判断localStorage中是否存在数据，如果有的话，先直接显示出来。然后在通过异步请求获得数据（公司最近一个项目，页面每次在loading页面要等蛮久，就是这个问题，如果利用localStorage，就只在首次加载会慢一点了吧），更新页面并更新本地存储。

总结：

1，localStoreage用于将大量数据（最大5M）保存在浏览器中，保存后数据永远不会失效过期，除非用js手动清除。

2，不参与网路传输

3，一般用于优化性能，主要用于保持大量数据。

cache

如果没有缓存，浏览器向服务器请求资源a.jpg，服务器找到对应资源把内容返回给浏览器。当浏览器再次向服务器请求a.jpg时，服务器重新发生完整的数据文件给浏览器。

如何解决呢？

　　浏览器把得到的文件存在本地就行了。下次请求直接从浏览器取（这个是浏览器的缓存）。

可是，如果服务器端更新了文件呢？

需要引入监测机制。如Cache-Control: max-age=300; ETag:W/"e-cbxLFQW5zapn79tQwb/g6Q"。假如浏览器在300s内再次获取a.jpg，浏览器直接从缓存读取a.jpg(200, from XX cache)。假如浏览器在300s之后再次获取a.jpg，浏览器在发送请求的时候附带a.jpg的ETag(If-None-Match：W/"e-cbxLFQW5zapn79tQwb/g6Q"n79tQwb/g6Q")。服务器在接收到请求后对比后端的Etag，如果一样则发个短消息（响应头，不包含图片内容，304），如果不等则发送新的文件和新的ETag，浏览器获取新文件并更该文件的Etag。

在这个理解的基础上，Cache-Control的几个值，no-cache（使用Etag），no-store（真正的不缓存），max-age等就要理解啦。

例子：

如果做一个web calendar（offline也能用），可以在cache里保存html、javascript、css、image，这样就相当于网页被保存了，可以offline访问了，但是如果calendar里有其他数据（比如meetings、events等大量数据），就需要将数据保存在localstorage里。

 

参考链接：

http://bbs.html5cn.org/thread-1161-1-1.html

https://zhuanlan.zhihu.com/p/23299600?refer=study-fe