20201019 浏览器缓存

浏览器缓存，又称为前端缓存，这里复习一下最常用的三种，Cookie、LocalStorage和SessionStorage。打开谷歌浏览器F12->Application，左侧菜单中有：LocalStorage、SessionStorage、IndexedDB、Web SQL和Cookie。

Cookie常用于网页登录机制：前端请求登录接口，服务端在响应时写入SetCookie，此后在Cookie的有效期内，前端发的请求都会自动带上这个Cookie一齐发送给服务端，服务端校验Cookie则知道此客户端已登录，可以进行接下来的操作。使用Cookie的原因是HTTP本身是无状态的，服务端通过一次普通的请求无法建立一系列操作，因为请求本身是无区别的，因此后端通过Session这个工具写入SetCookie返回给客户端，客户端带Cookie请求后，后端通过Session解析Cookie。

而LocalStorage与SessionStorage属于Web Storage，与Cookie的主要区别是存储容量的大小，Cookie只能存储4KB的字符，Web Storage能够存储5MB的字符。LocalStorage和SessionStorage，用于存储页面数据，一般存储一些字符串类型的标记，它们的区别在于生命周期。LocalStorage是写入后永久存在的，除非js或手动清除修改，否则在同一浏览器同一域名中会一直存在。而Sessionstorage是会话缓存，即生命周期只存在于当前页面中，当页面关闭时就会自动清除。本人在开发过程中没有用到过SessionStorage的情况，只用过LocalStorage，如一个办事大厅中使用的高拍仪型号（不同型号有差异化）是固定的（硬件设备由*采购，考虑到成本一般不会更改），那么第一次使用我们的页面时就判断好型号并存入LocalStorage中，下次再进入时就不再判断可以直接获取高拍仪型号，减少了程序执行消耗。