一、本地存储

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

  • sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
  • 而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的；

1-1 本地存储的优点

  1. localStorage拓展了cookie的4K限制
  2. localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

1-2 本地存储的局限

  1. 浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
  2. 目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
  3. localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
  4. localStorage不能被爬虫抓取到

1-3 本地存储的用法

  • localStorage.setItem(“key”,”value”);//存储
  • localStorage.getItems(key);//按key进行取值
  • localStorage.removeItems(key);//按key单个删除
  • localStorage.clear();//删除全部数据
  • localStorage.length;//获得数据的数量
  • localStorage.valueOf();//获取全部值

二、离线缓存

参考文档

2-1 什么是离线缓存

　 离线缓存：离线缓存可以将站点的一些文件缓存到本地，它是浏览器自身的一种机制，将需要的文件缓存下来，以便后期即使没有连接网络，被缓存的页面也可以展示

2-2 离线缓存的优势

  1. 在没有网络的时候可以访问到缓存的对应的站点页面，其中包括（HTML，css，js，img…）
  2. 在有网络的时候，浏览器也会优先使用已离线存储的文件，返回一个200（from cache）头，这与http的缓存使用策略是不同的
  3. 资源的缓存可以带来更好的用户体验，当用户使用自己流量上网时，本地缓存不仅可以提高用户访问速度，而且更大的节约了用户的使用流量；


2-3 离线缓存的用法

2-3-1 在html标签添加manifest属性

在页面的html标签中添加manifest属性，属性值为manifest文件的路径。如：

  1.     <!DOCTYPE HTML> 
  2.             <html manifest="../js/demo.manifest">
  3.                     ...
  4.             </html>

2-3-2 编写manifest文件

manifest文件是简单的文本文件，它会告知浏览器需要缓存的内容以及不需要缓存的内容。
manifest文件可分为三部分：

  1. CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
  2. NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
  3. FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

    2-3-4 简单示例

    简单示例:
  CACHE MANIFEST
     #version 1.1   /*版本号*/
     CACHE:
         html/index.html /*需要缓存的文件*/
     NETWORK:
         js/jquery.js /*不需要缓存的文件*/
     FALLBACK: 
         html/index.html /*当页面无法访问时的回退页面*/