Cookie、localStorage、SessionStorage、IndexDB、localforage的使用和对比
1、Cookie
服务端发送给用户浏览器并保存在本地的一小块数据,也叫HTTP Cookie或Web Cookie
特点:
-
- 大小上限极小,仅约4kb
- 会过期,会自动删除(会话性cookie在浏览器关闭后自动删除;持久性cookie的生命周期取决于过期时间)
- 终端用户可修改,存在一定安全问题,需避免XSS攻击
cookie不适合客户端数据的存储,原因是:
- cookie曾一度用户客户端数据的存储,因为当时并没有其他合适的存储方法而作为唯一的存储手段,由于服务器指定cookie后,浏览器的每次请求都会携带cookie数据,会带来额外的性能开销
2、Web Storage API
web storage提供两种方式
该API能够允许开发者直接将数据存储到本地(客户端),相对于Cookie来说更为友好,能够让你实现基本的数据存储,但它的速度慢,而且不能处理二进制数据。
但各浏览器支持的 localStorage 和 sessionStorage 容量上限不同
可得:Web Storage API的大小仍受限制,约在5M左右
证明存储较少量的客户端数据时,localStorage和sessionStorage非常合适
传统的 API 在许多方面其实是很不错的,使用简单,没有复杂的数据结构。如果你在你的应用程序有一个配置信息需要保持,可以这样写:
// 需要离线保存的配置数据 var config = { fullName: document.getElementById('name').getAttribute('value'), userId: document.getElementById('id').getAttribute('value') }; // 保存起来,供下次使用 localStorage.setItem('config', JSON.stringify(config)); // 从离线存储中读取出来 var config = JSON.parse(localStorage.getItem('config'));
使用 localStorage 存储的数据需要保存为字符串,所以我们在保存和读取时需要进行 JSON 序列化和反序列化。
看起来好像使用很简单,但你很快会发现 localStorage 的几个问题:
-
它是同步的。不管数据多大,我们需要等待数据从磁盘读取和解析,这会减慢我们的应用程序的响应速度。这在移动设备上是特别糟糕的,主线程被挂起,直到数据被取出,会使你的应用程序看起来慢,甚至没有反应。
-
它仅支持字符串。需要使用 JSON.parse 与 JSON.stringify 进行序列号和反序列化。这是因为 localStorage 中仅支持 JavaScript 字符串值。不支持数值,布尔值,Blob 类型的数据。
3、IndexedDB
如果想要存储更为大量的数据,可以选择indexDB,原因是:
indexDB是一种底层API,用于在客户端存储大量的结构化数据(包括文件和二进制大型对象),该API使用索引实现对数据的高性能搜索
特点:
- 是一个基于js的面向对象数据库,可指定数据库模式
- 存储空间大
- 操作异步执行,以避免阻塞应用程序
缺点:直接使用较为复杂,推荐使用封装的工具库,提高工作效率和准确度
4、localForage:轻松实现web离线缓存
localForage是一个使用非常简单的js库,提供了get,set,remove,clear和length等API,具有以下特点:
- 支持回调的一部API
- 支持indexDB,WEBSQL和localStorage三种存储模式(自动为你加载最佳的驱动程序)
- 支持BLOB和任意类型的数据,可以存储图片和文件等
- 支持es6 promise
对 IndexedDB 和 WebSQL 的支持使您可以为您的 Web 应用程序存储更多的数据,要比 localStorage 允许存储的多很多。其 API 的无阻塞性质使得您的应用程序更快,不会因为 Get/Set 调用而挂起主线程。
// 保存用户信息 var users = [ {id: 1, fullName: 'Matt'}, {id: 2, fullName: 'Bob'} ]; localForage.setItem('users', users, function(result) { console.log(result); });
支持非字符串数据
比方说,你要下载一个用户的个人资料图片,并对其进行缓存以供离线使用。使用 localForage 很容易保存二进制数据:
// 使用 AJAX 下载图片 var request = new XMLHttpRequest(); // 以获取第一个用户的资料图片为例 request.open('GET', "/users/1/profile_picture.jpg", true); request.responseType = 'arraybuffer'; // 当 AJAX 调用完成,把图片保存到本地 request.addEventListener('readystatechange', function() { if (request.readyState === 4) { // readyState DONE // 保存的是二进制数据,如果用 localStorage 就无法实现 localForage.setItem('user_1_photo', request.response, function() { // 图片已保存,想怎么用都可以 }); } }); request.send()
下次,只用三行代码就可以从缓存中把照片读取出来:
ocalForage.getItem('user_1_photo', function(photo) { // 获取到图片数据后,可以通过创建 data URI 或者其它方法来显示 console.log(photo); });
Callbacks & Promises
如果你不喜欢在你的代码中使用回调,你可以使用 ES6 Promises,来替换 localForage 的回调参数。让我们使用上面的照片例子,看下使用 Promises 的代码:
localForage.getItem('user_1_photo').then(function(photo) { // 获取到图片数据后,可以通过创建 data URI 或者其它方法来显示 console.log(photo); });
跨浏览器支持
localForage 支持所有现代浏览器(包括 IE8 及更高版本)。支持的浏览器和平台如下:
安装,比如在vue中
npm install localforage
在入口文件处引入
import localforage from "localforage"; localforage.config({driver: localforage.INDEXEDDB}); Vue.prototype.$localforage = localforage;