前端缓存

55 阅读2分钟

前端缓存是什么 前端缓存一般用于缓存一些不常修改的常量数据或一些静态资源文件。大部分接口请求的数据都缓存在了服务端,方便统一管理缓存数据。前端做缓存可以缓解服务端的压力,减少带宽的占用,同时也可以提升前端的查询性能。 前端缓存可分为两大类:浏览器存储 和 HTTP 缓存 。 浏览器存储 浏览器存储的分类:

Cookie WebStorage sessionStorage(会话存储) localStorage(本地存储)

WebStorage WebStorage提供两种类型的API:localStorage 和 sessionStorage。它们均继承自 Storage 类。 sessionStorage sessionStorage 对象是 Storage 类型的一个实例,拥有 Storage 的所有属性和方法。 页面刷新不会影响 sessionStorage 对象中的数据;除 IE 之外,其他浏览器即使崩溃了,重启后也不会影响 sessionStorage 对象中的数据。

localStorage localStorage 对象是 Storage 类型的一个实例,拥有 Storage 的所有属性和方法。 localStorage 对象用来:持久保存客户端的数据(数据保留到通过 JavaScript 删除或者是用户清除浏览器缓存)。 操作 localStorage 对象中的数据:

// 存储数据 localStorage.name01 = "Liuibang"; localStorage.setItem("name02", "Zhangliang"); // 获取数据 console.log(localStorage.name01); // Liuibang console.log(localStorage.getItem("name02")); // Zhangliang // 删除数据 delete localStorage.name01; localStorage.removeItem("name02"); Cookie Cookie 用来:存储客户端的 HTTP 状态信息。 Cookie 的特点:

同一个域名下的 cookie 是共享的。不利于 http 性能的提升,而且不同域名间会产生跨域。 数量受限,大小受限。不同的浏览器对 cookie 都有各自的数量限制,且每个 cookie 只能存储 4KB 大小的数据。 可以设置有效期。关闭浏览器后,没有设置有效期的 cookie 会被清掉,设置了有效期的 cookie 会继续生效,直到过期时自动清掉 小结

Cookie: 用来存储客户端的 HTTP 状态信息。 同一个域名下的 cookie 是共享的。不利于 http 性能的提升,而且不同域名间会产生跨域。 数量受限,大小受限。不同的浏览器对 cookie 都有各自的数量限制,且每个 cookie 只能存储 4KB 大小的数据。 可以设置有效期。关闭浏览器后,没有设置有效期的 cookie 会被清掉,设置了有效期的 cookie 会继续生效,直到过期时自动清掉。

sessionStorage(会话存储): 用于临时保存同一窗口(或标签页)的数据。在关闭窗口后这些数据会自动删除。 只能存储字符串。 不会产生跨域。 同步存储。 大小受限,最多只能存储 5M 。 localStorage(本地存储): 用来持久保存客户端的数据。只要不人为删除数据会一直在。 只能存储字符串。 不会产生跨域。 同步存储。 大小受限,最多只能存储 5M 。