首页 > 其他分享> > 前端数据存储

前端数据存储

2022-03-03 15:01:57 作者：互联网

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;

标签：localForage,localforage,存储,前端,API,localStorage,数据
来源： https://www.cnblogs.com/nielifang/p/15959823.html