zoukankan      html  css  js  c++  java
  • 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文件,创建应用缓存。

             

  • 相关阅读:
    Android 添加cookie
    解决安卓TextView异常换行,参差不齐等问题
    Java遍历List的时候删除item
    android setCompoundDrawables 不显示问题
    Git 操作的一些场景
    C# 函数参数中的this
    Git 常用命令
    C# 判断程序是否执行 进行启动或前台显示
    在窗体中嵌入 应用程序
    byte[] 转 2进制字符串
  • 原文地址:https://www.cnblogs.com/leyan/p/8963193.html
Copyright © 2011-2022 走看看