web实现本地缓存的方法

Cookie(或者Cookies

    指一般网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据(通常经过加密)。

cookie一般通过http请求中在头部一起发送到服务器端。一条cookie记录主要由键、值、域、过期时间、大小组成,一般用户保存用户的认证信息。cookie最大长度和域名个数由不同浏览器决定。 不同域名之间的cookie信息是独立的,如果需要设置共享可以在服务器端设置cookie的path和domain来实现共享。浏览器端也可以通过document.cookie来获取cookie,并通过js浏览器端也可以方便地读取/设置cookie的值。

 

localStorage

    是html5的一种新的本地缓存方案,目前用的比较多,一般用来存储ajax返回的数据,加快下次页面打开时的渲染速度。

localStorage核心API:

localStorage.setItem(key, value) 设置记录

localStorage.getItem(key) 获取记录

localStorage.removeItem(key) 删除该域名下单条记录

localStorage.clear() 删除该域名下所有记录  

 

sessionStorage

    和localstorage类似,只存储特定于某个会话的数据,也就是该数据只保存到浏览器关闭。api和localstorage相同,实际项目中使用较少。   IndexedDB 是在客户端存储结构化数据的数据库(一个为了能够在客户端存储可观数量的结构化数据),并且在这些数据上使用索引进行高性能检索的 API。虽然 DOM 存储 对于存储少量数据是非常有用的,但是它对大量结构化数据的存储就显得力不从心了。IndexedDB 则提供了这样的一个解决方案。   

 

IndexedDB

    分别为同步和异步访问提供了单独的 API 。同步 API 本来是要用于仅供 Web Workers 内部使用,但是还没有被任何浏览器所实现。异步 API 在 Web Workers 内部和外部都可以使用,另外浏览器可能对indexDB有50M大小的限制,一般用户保存大量用户数据并要求数据之间有搜索需要的场景。

 

application cahce

     是将大部分图片资源、js、css等静态资源放在manifest文件配置中。当页面打开时通过manifest文件来读取本地文件或是请求服务器文件。  

     离线访问对基于网络的应用而言越来越重要。虽然所有浏览器都有缓存机制,但它们并不可靠,也不一定总能起到预期的作用。HTML5 使用ApplicationCache 接口可以解决由离线带来的部分难题。前提是你需要访问的web页面至少被在线访问过一次。  

    使用缓存接口可为您的应用带来以下三个优势:

    离线浏览 – 用户可在离线时浏览您的完整网站

    速度 – 缓存资源为本地资源,因此加载速度较快。

   服务器负载更少 – 浏览器只会从发生了更改的服务器下载资源。

 

flash

   缓存这种方式基本不用,这一方法主要基于flash有读写浏览器端本地目录的功能,同时也可以向js提供调用的api,则页面可以通过js调用flash去读写特定的磁盘目录,达到本地数据缓存的目的。

原文地址:https://www.cnblogs.com/microcosm/p/6600736.html