H5缓存比较

h5缓存的几种形式：

1.离线缓存(session && cookie)

2.本地存储(localstorage && sessionstorage)

3.前端数据库(websql && indexeddb)

一、离线缓存(application cache)

session和cookie的区别

1.使用方式

​ cookie机制：如果不在浏览器中设置过期事件，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称为会话cookie。如果在浏览器中设置了cookie的过期事件，cookie会被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期事件结束才消失。cookie是服务端发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它

​ session机制：当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie，则要使用URL重写，可以通过response.encodeURL(url)进行实现；API对encodeURL的结束为，当浏览器支持cookie时，url不做任何处理；当浏览器不支持cookie的时候，将会重写URL将sessionid拼接到访问地址后。

2.保持状态

​ cookie保存在浏览器端，session保存在服务器端。

3.存储的大小

​ 单个cookie保存的数据不能超过4kb；session大小没有限制。

4.存储内容

​ cookie只能保存字符串类型，以文本的方式。
session通过类似与Hashtable的数据结构来保存，能支持任何类型的对象（session中可含有多个对象）

5.安全性

​ session的安全性大于cookie。原因如下：

① sessionid存储在cookie中，若要攻破session首先要攻破cookie；
② sessionid是要有人登录，或者启动session_start才会有，所以攻破cookie也不一定能得到sessionid；
③ 第二次启动session_start后，前一次的sessionid就是失效了，session过期后，sessionid也随之失效。
④ sessionid是加密的。

​

6.应用场景

cookie：

（1）判断用户是否登录过网站，以便下次登录时能够实现自动登录（或者记住密码）。
（2）保存上次登录的事件等信息。
（3）保存上次查看的页面
（4）浏览计数

session：

（1）网上商城中的购物车
（2）保存用户登录信息
（3）将某些数据放入session中，供同一用户的不同页面使用
（4）防止用户非法登录

7.缺点(不足)

cookie：

（1）大小受限
（2）用户可以操作（禁用）cookie，使功能受限
（3）安全性较低
（4）有些状态不可能保存在客户端
（5）每次访问都要传送cookie给服务器，浪费宽带
（6）cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下。

session：

（1）session保存的东西越多，就越占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大
（2）依赖于cookie（sessionid保存在cookie），如果禁用cookie，则要使用URL重写
（3）创建session变量有很大的随意性，可随时调用，不需要开发者做精确地处理，所以过度的使用session变量将会导致代码不可读而

二、WebStorage(本地存储)

​ WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。

WebStorage两个主要目标：

1.提供一种在cookie之外存储会话数据的路径
2.提供一种存储大量可以跨会话存在的数据的机制

​ HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）

localStorage和sessionStorage的区别

1.生命周期

​ localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。
sessionStorage的生命周期是仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

2.存储大小

​ localStorage和sessionStorage的存储数据大小一般都是：5MB

3.存储位置

​ localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信

4.存储内容类型

​ localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

5.获取方式

​ localStorage：window.localStorage
​ sessionStorage：window.sessionStorage

6.应用场景

​ localStorage：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据
​ sessionStorage：敏感账号一次性登录

WebStorage的优点

（1）存储空间更大：cookie为4KB，而WebStorage是5MB

（2）节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样每次请求都会传送到服务器，所以减少了客户端和服务端的交互，节省了网络流量

（3）对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便

（4）快速显示：有的数据存储在WebStorage上再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快

（5）安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说会比较高一些，不会担心截获，但是仍然存在伪造问题

（6）WebStorage提供了一些方法，数据操作比cookie方便

setItem(key, value) —— 保存数据，以键值对的方式存储信息
getItem(key) —— 获取数据，将键值传入，即可获取到对应的value值
removeItem(key) —— 删除单个数据，根据键值移除对应的信息
clear() —— 删除所有的数据
key(index) —— 获取某个索引的key

三、前端数据库——WebSQL和IndexedDB

概述:

​ 随着前端的技术发展越来越强，网页功能不断增加，越来越复杂的交互和业务需要前端来实现，那么作为前端开发就需要面对越来越庞大的数据体，那么其中一个常用的优化方式就是本地存储一些不变的数据，从而提升页面渲染的速度，减少从服务器获取数据。

​ 我们以前和现在都会经常用的本地缓存方式一般都是localStorage、sessionStorage和cookie。但是都会有一个很严重的问题，就是它们都不能存放大量数据，在现在的业务情况下，很容易出现存放数据过大，导致超出浏览器对于localStorage、sessionStorage和cookie的存储大小，cookie不能超过4KB，localStorage和sessionStorage一般不超过4MB（不同浏览器的限制不一样），所以这些技术都不太适合存放大量的数据。所以在这个前提下，我们就可以使用HTML5提供的新API，IndexedDB!

1.Web Sql Database(兼容性差并已停止维护，不推荐使用)

​ 中文翻译作“本地数据库”，是随着HTML5规范加入的在浏览器端运行的轻量级数据库。
在HTML5中，大大丰富了客户端本地可以存储的内容，添加了很多功能来将原本必须保存在服务器上的数据转为保存在客户端本地，从而大大提高了Web应用程序的性能，减轻了服务器端的负担，使Web时代重新回到了“客户端为重，服务器为轻”的时代。
在这其中，一项非常重要的功能就是数据库的本地存储功能。在HTML5中内置了一个可以通过SQL语言来访问的数据库。在HTML4中，数据库只能放在服务器端，只能通过服务器来访问数据库，但是在HTML5中，可以就像访问本地文件那样轻松的对内置的数据库进行直接访问。现在，像这种不需要存储在服务器上的，被称为“SQLite”的文件型SQL数据库已经得到了很广泛的利用，所以HTML5中也采用了这种数据库来作为本地数据库。

2.IndexedDB(放弃localStorage,拥抱IndexedDB,兼容性较好,推荐使用)

​ IndexedDB是HTML5规范里新出现的浏览器里内置的数据库。对于在浏览器里存储数据，你可以使用cookies或local storage，但它们都是比较简单的技术，而IndexedDB提供了类似数据库风格的数据存储和使用方式。存储在IndexedDB里的数据是永久保存，不像cookies那样只是临时的。IndexedDB里提供了查询数据的功能，在online和offline模式下都能使用。你可以用IndexedDB存储大型数据。
IndexedDB里数据以对象的形式存储，每个对象都有一个key值索引。IndexedDB里的操作都是事务性的。一种对象存储在一个objectStore里，objectStore就相当于关系数据库里的表。IndexedDB可以有很多objectStore，objectStore里可以有很多对象。

IndexedDB 具有以下特点。

• key/value的存储方式：IndexedDB和localStorage的存储方式很类似，都是通过一个key对应一个value，而且key是唯一的方式进行存储的，但是indexedDB和localStorage有很不一样的一点，就是可以直接存储对象数组等，不需要想localStorage那样必须转为字符串。
• 异步调用：IndexedDB是使用异步调用的，当我们存储一个较大的数据时，不会因为写入数据慢而导致页面阻塞。
• 支持事务：IndexedDB支持事务，如果有用过mysql和mongoDB的人就很清楚了，能确保我们多个操作只要其中一步出现问题，可以整体回滚。
• 同源限制：IndexedDB和localStorage一样，都是有同源策略的问题，不能跨协议、端口、域名使用。
• 储存空间：IndexedDB我认为最最最大的优势在于存储空间相比localStorage要大得多，一般来说不少于250MB。
• 支持二进制：IndexedDB不但可以存储对象，字符串等，还可以存储二进制数据。

IndexedDB 使用场景。

​ 当我们进行一些较大的SPA页面开发时，我们会需要进行一些数据的本地存储。当数据量不大时，我们可以通过SessionStorage或者LocalStorage来进行存储，但是当数据量较大，或符合一定的规范时，我们可以使用数据库来进行数据的存储。

indexedDB 类库Dexie.js。

​ 6.5K个星星 地址：GitHub - dfahlander/Dexie.js: A Minimalistic Wrapper for IndexedDB

Hello World

<!doctype html>
<html>
 <head>
  <script src="https://unpkg.com/dexie@latest/dist/dexie.js"></script>
  <script>
   //
   // Declare Database
   //
   var db = new Dexie("FriendDatabase");
   db.version(1).stores({
     friends: "++id,name,age"
   });

   //
   // Manipulate and Query Database
   //
   db.friends.add({name: "Josephine", age: 21}).then(function() {
       return db.friends.where("age").below(25).toArray();
   }).then(function (youngFriends) {
       alert ("My young friends: " + JSON.stringify(youngFriends));
   }).catch(function (e) {
       alert ("Error: " + (e.stack || e));
   });
  </script>
 </head>
</html>

Yes, it’s that simple.

原生的太恶心以后就用这个吧

ps：这俩玩意都在application里可以进行查看，概念几乎和数据库相同，想了解数据库相关基础知识，自行百度吧。然后这俩玩意对应的操作数据库的方法什么的，太多了自己去看文档吧。Web Sql Database:Web SQL Database (w3.org)

IndexedDb:IndexedDB - Web API 接口参考 | MDN (mozilla.org)