本地存储

1.cookie

（1）在h5之前，存储主要用的是cookie。cookie会随着每次http请求头信息一起发送，无形中增加了网络流量，另外，cookie能存储的数据容量有限，根据浏览器类型不同而不同

（2）cookie的优缺点

优点：

-可控制过期时间，使其不会长期有效
-可扩展、可用性比较好
-可加密减少cookie被破解的可能性

缺点：

-数量和长度有限制，最多20条，最长不能超过4k
-在请求头上带着数据安全性差

（3）cookie的应用场景：

主要应用：购物车、客户端登录

localStorage

（1）localStorage（本地存储）,可以长期存储数据，没有时间限制，一天，一年，两年甚至更长，数据都可以使用

（2）优缺点

优点：

-localStorage拓展了cookie的4k限制localStorage可以将第一次请求的5M大小数据直接存储到本地。
-相比于cookie可以节约带宽，localStorage的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的localStorage。

缺点：

-需要手动删除，否则长期存在浏览器大小不一，版本的支持也不一样。localStorage只支持string类型的存储，JSON对象需要转换localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。

特点：

同源策略限制、只在本地存储、永久保存、同浏览器共享

（3）应用场合

1.数据比较大的临时保存方案。如在线编辑文章时的自动保存。
2.多页面访问共同数据。sessionStorage只适用于同一个标签页，localStorage相比而言可以在多个标签页中共享数据。

sessionStorage

（1）sessionStorage（会话存储），只有在浏览器被关闭之前使用，创建另一个页面时同意可以使用，关闭浏览器之后数据就会消失

（2）特点

-同源策略限制。

若想在不同页面之间对同一个sessionStorage进行操作，这些页面必须在同一协议、同一主机名和同一端口下。

-单标签页限制。

sessionStorage操作限制在单个标签页中，在此标签页进行同源页面访问都可以共享sessionStorage数据。

-只在本地存储。

seesionStorage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据

-存储方式。

seesionStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串，也会在存储时转换为字符串。)。

-存储上限限制：

不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。

（3）应用场合：

sessionStorage 非常适合单页应用程序，可以方便在各业务模块进行传值。

离线缓存

Application Cache （Manifest）

(1)使用方法：

1> 在html标签添加manifest属性

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

图片.png

(2）编写manifest文件

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

manifest文件可分为三部分：

(1) CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

(2)NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存

(3)FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

图片.png

(3)离线缓存与传统浏览器缓存区别：

浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览

区别：

1、离线缓存是针对整个应用，浏览器缓存是单个文件

2、离线缓存断网了还是可以打开页面，浏览器缓存不行

3、离线缓存可以主动通知浏览器更新资源

本地存储和离线存储有什么不同

本地存储与离线缓存都是为了方便网页的加载，提高用户体验等。

本地存储一般存储的都是数据，而离线缓存一般存储的是网页等。