找回密码
 立即注册
即日起,论坛关闭新用户注册和登录,论坛相关的贴子保留查阅和下载。获得授权后,有技术问题可联系微信 13199509559 一对一解决。 2024-3-12
查看: 5017|回复: 0

h5的缓存机制

206

主题

206

主题

206

主题

管理员

Rank: 9Rank: 9Rank: 9

积分
0
admin 发表于 2022-4-23 15:01:26 | 显示全部楼层 |阅读模式


H5的缓存主要有localstorage、sessionstorage、cookie和manifest。
一、LocalStorage
        LocalStorage是永久性的本地缓存,存储在客户端的浏览器上,除非主动删除,是不会过期的。LocalStorage采用的是键值对的方式进行存储,存储方式只能是字符串。存储内容可以用图片、json、样式、脚本等。
        API基本使用方法:
         1、localStorage.setItem() 存储
         2、localStorage.getItem() 获取数据,其中使用localStorage.valueOf()获取全部数据
         3、localStorage.removeItem(key) 删除数据
         4、localStorage.clear()清空全部数据,localStorage.length 获取本地存储数据数量
         5、localStorage.key(N)获取第N个数据的key键值
二、SessionStorage
       SessionStorage用于本地存储一个会话中的数据,这些数据只有在同一个会话中的页面才能访问并且会话结束,窗口关闭后,数据就会消失。是一种会话级别的存储。
       SessionStorage与localStorage 的使用方法相似,比如在app里边嵌套一个h5页面,接口header中的token就可以存储到SessionStorage中
三、cookie
       cookie与sessionStorage、localStorage还是有很大不同的。
        1、cookie数据始终在同源的http请求中携带,cookie在浏览器和服务器端来回传递,而localstorage和sessionstorage不会自动把数据传送给服务器端,仅在本地保存。
        2、存储大小限制不同,cookie的存储数据大小要求不能超过4k,每次的http请求都会携带cookie,所以保存的数据需要比较小。sessionstorage和localstorage存储数据大小限制比cookie要大,可以达到5M或者更大,不同浏览器设置可能不同。
        3、数据生命周期。cookie的生命周期一般在其设置的过期时间之前有效。而sessionstorage仅在关闭窗口前有效,localstorage持久有效,直到手动删除。
        4、作用域不同,sessionstorage不在不同浏览器中共享,即使是同一页面也不支持。而localstorage在所有同源窗口中都是共享的,同样,cookie在所有同源窗口中也是可以共享的。
        5、cookie的数据还有路径的概念,可以通过设置限制cookie只属于某个路径
        6、webstorage 支持事件通知机制,可以将数据更新的通知发送给监听者。
四、webStorage的好处
  sessionStorage、localStorage都属于webstorage
         1、减少网络流量:使用webstorage将数据保存在本地中,减少不必要的请求。
         2、快速显示数据:从本地获取数据比通过网络从服务器获取数据效率更高,因此网页显示也比较快;
         3、临时存储:很多时候数据只需在用户浏览一组页面期间使用,关闭窗口后数据就会丢失,使用sessionstorage 比较方便;
         4、不影响网络效能:因为webstorage只作用在客户端的浏览器,不会占用频宽。
  五、离线存储
         H5中添加了离线缓存,通过创建cache mainfest文件,创建应用缓存。

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表