前端缓存之本地缓存

之前说了HTTP缓存，今天说说本地缓存。本地缓存也是平时开发过程经常用的。

本地缓存就简单多了，我们常用的有三个：cookie、localStorage、sessionStorage。

Cookie：一般用来存储用户信息，每次请求的时候内容都会自动被传递给服务器。不同浏览器对于cookie的大小并不统一，一般都是4-10kb。Cookie可以设置时效。注意，cookie比较浪费带宽，不建议写入太多内容，这也是前端性能优化的一点。

LocalStorage：localstorage会把内容一直存在浏览器，直到清除浏览器的缓存。注意，没有清除浏览器缓存，数据会永久存储在浏览器。Localstorage一般在5M左右。

sessionStorage：跟localStorage一样，只不过sessionStorage的生命周期跟同源窗口有关，就是说当前同一个源下面的只要有一个窗口没关或者跳到另外的窗口，sessionStorage都会存在。sessionStorage大小也是5M左右。

上面三个是最常用的，还有一个session比较常用，这个是后台服务器设置的，我们只要了解session是后台注入后台使用，按理来说session没有大小限制。从安全性来说，session比cookie安全。

浏览器还提供了两个数据库，webSql和indexDb,webSql已经被W3C废弃，这两个类似数据库，原谅本人从来没用过，也不被推荐使用，所以感兴趣的可以自行去了解。

PWA，不知道这个东西在以后会不会火，PWA主要是为了提供跟APP一样，很多东西缓存到本地，也叫作离线缓存就算在没有网的时候也能有内容展示，这也算缓存的一种。

还有一种很容易被忽略的缓存，往返缓存，有点类似单页面应用的history路由模式，就是浏览器的后退前进按钮，主要是为了加快页面的切换速度，不用重新请求，不仅保存了数据，还保存了DOM和JavaScript。简单说就是保存了整个页面，且切换的时候不会触发load事件。这种缓存方式在微信里面也有很多使用。

欢迎关注Coding个人笔记 公众号