前端存储都有哪些

2024/10/25 6:53:47 来源：https://blog.csdn.net/weixin_72324200/article/details/140051560 浏览: 次关键词：前端存储都有哪些

由服务器设置，在客户端存储，然后每次发起同源请求时，发送给服务器端。cookie最多能存储4K数据，它的生存时间由expires属性指定，并且cookie只能被同源的页面访问共享。

html5 提供的一种浏览器本地存储的方法，它一般也能够存储5M或者更大的数据。它和sessionStorange不同的是，除非手动删除它，否则它不会失效，并且localStorage也只能被同源页面所访问共享。

html5 提供的一种浏览器本地存储的方法，它借鉴了服务端session的概念，代表的是一次会话中所保存的数据。它一般能够存储5M或者更大的数据，它在当前窗口关闭后就失效了，并且sessionStorange只能被同一个窗口的同源页面所访问共享。

优点：主要通过请求头和响应头的信息，来控制缓存的策略。它的优点有缩短网页请求资源的距离，减少延迟、节省流量，由于缓存文件可以重复利用，减少服务器的压力，提高客户端的响应。

缺点：缓存可能导致用户看到过期的内容，需要使用版本号或者文件指纹来解决。如果缓存策略不当，可能会造成资源更新后用户无法及时获取最新内容。

浏览器缓存分为：强缓存200、协商缓存304

区别： 强缓存不向服务器发送请求，协商缓存会发送请求至服务器

相同点：若命中，都直接从浏览器缓存加载资源，不从服务器加载资源

由响应头来控制缓存：

强缓存：Expired 、catch-Control

浏览器在请求资源时，先检查该资源的缓存标识（例如Expires、Cache-Control的max-age等），如果该资源在缓存有效期内，则直接使用缓存，不会向服务器发起请求。

协商缓存:(请求头+响应头) ：Last-Modifired 、Etag

当资源的缓存过期或者需要验证时，浏览器会向服务器发送请求，服务器会根据资源的最后修改时间（Last-Modified）或者资源的唯一标识（ETag）来判断资源是否有更新。

强缓存的资源存储位置

状态	Network - Size	含义
200	from memory cache	不请求网络资源，资源在内存，一般是脚本、字体、图片，浏览器关闭，数据将被释放
200	from disk cache	请求网络资源，资源在磁盘，一般是css等，关闭数据还在
200	资源大小	从服务器下载最新资源
304	报文大小	请求服务端发现资源未更新，使用本地资源

用户行为对强缓存和协商缓存的影响