• h5的缓存机制


       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键值

    二、SessionSotrage

           SessionStorage用于本地存储一个会话中的数据,这些数据只有在同一个会话中的页面才能访问并且会话结束,窗口关闭后,数据就会消失。是一种会话级别的存储。

           SessionStorage与localStorage 的使用方法相似

     三、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 的好处

             1、减少网络流量:使用webstorage将数据保存在本地中,减少不必要的请求。

             2、快速显示数据:从本地获取数据比通过网络从服务器获取数据效率更高,因此网页显示也比较快;

             3、临时存储:很多时候数据只需在用户浏览一组页面期间使用,关闭窗口后数据就会丢失,使用sessionstorage 比较方便;

             4、不影响网络效能:因为webstorage只作用在客户端的浏览器,不会占用频宽。

      五、离线存储

             H5中添加了离线缓存,通过创建cache mainfest文件,创建应用缓存。

             

  • 相关阅读:
    你的内存不够啦:c++: internal compiler error: Killed (program cc1plus)
    ARM交叉编译器GNUEABI、NONE-EABI、ARM-EABI、GNUEABIHF等的区别
    arm-linux-gnueabihf、aarch64-linux-gnu等ARM交叉编译GCC的区别
    ubuntu与centos的对比和选择
    Deep Convolutional Network Cascade for Facial Point Detection实践总结
    深度学习(十七)基于改进Coarse-to-fine CNN网络的人脸特征点定位
    《Deep Convolutional Network Cascade for Facial Point Detection》复现
    使用axis2,根据WSDL生成java客户端代码
    oracle字段NCHAR查询,
    【转】fastdfs第一次上传文档报错recv package size
  • 原文地址:https://www.cnblogs.com/leyan/p/8963193.html
Copyright © 2020-2023  润新知