localForage|前端数据存储

ALISONLY
5,911 阅读3分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前端进行数据存储，一般就会想到 Cookie、Window.localStorage 和 Window.sessionStorage

以下来温故而知新

Cookie

服务器发送到用户浏览器并保存在本地的一小块数据，也叫HTTP Cookie或Web Cookie

特点如下：

  • 大小上限极小，仅约4KB
  • 会过期，过期自动删除
    • 会话性Cookie在浏览器关闭后则自动删除
    • 持久性Cookie的生命周期取决于过期时间
  • 终端用户可所修改，存在一定安全问题，需避免XSS攻击

Cookie不适合客户端数据的存储，原因如下：

Cookie 曾一度用于客户端数据的存储，因当时并没有其它合适的存储办法而作为唯一的存储手段。由于服务器指定 Cookie 后，浏览器的每次请求都会携带 Cookie 数据，会带来额外的性能开销（尤其是在移动环境下）

Web Storage API

Web Storage提供了两种方式，正是上述提到的：

localStoragesessionStorage
本地存储会话存储
保存在浏览器会话在页面会话期间可用（页面打开状态）
浏览器关闭后仍可长期保留关闭浏览器窗口即清除
同源的浏览器标签页面，可共享数据不同的浏览器标签页面，即使同一地址不共享

该API能够允许开发者直接将数据存储到本地（客户端），相对于Cookie来说更为友好

但各浏览器支持的 localStorage 和 sessionStorage 容量上限不同，MDN文档提供了一个测试页面，# 传送门

eg：浏览器 Google Chrome，版本 94.0.4606.81，自行测试结果如下：

微信截图_20211027233106.png

可得：Web Storage API的大小仍受限制，约在5M左右

证明存储较少量的客户端数据时，localStorage和sessionStorage非常合适

IndexedDB

image.png

如果想存储更为大量的数据，可以选择IndexedDB，原因：

IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。

特点：

  • 是一个基于 JavaScript 的面向对象数据库，可指定数据库模式
  • 存储空间大
  • 操作异步执行的，以免阻塞应用程序

IndexedDB优点多多，但缺点也明显：直接使用较为复杂，推荐使用封装的工具库，提供工作效率和准确度

localForage

IndexedDB API是强大的，但对于简单的情况可能看起来太复杂。如果你更喜欢一个简单的API，请尝试  localForage等

  • 异步离线存储

    用法上靠近 Promise，方便执行回调

  • 支持存储多种类型的数据

    • 存在降级策略：若浏览器不支持 IndexedDB 或 WebSQL，则使用 localStorage

    • 用法上类似 Web Storage API

    // 读取项
localforage.getItem(key, successCallback) 
// 设置项，支持ArrayBuffer、Blob等数据
localforage.setItem(key, value, successCallback) 
// 移除项
localforage.removeItem(key, successCallback) 
// 移除所有项
localforage.clear(successCallback)

  • 支持强制设置特定的驱动：IndexedDB、WebSQL、localStorage

    localforage.setDriver([driverName, nextDriverName])
// 或者
localforage.config({ driver })

    eg：在基于Vue的项目，可在入口文件定义

    import localforage from "localforage";
localforage.config({driver: localforage.INDEXEDDB});
Vue.prototype.$localforage = localforage;

  • 方便获取数据仓库键值对数据

localforage还提供几个api，利于获取当前数据仓库的数据：

```js
// 获取数据仓库中key的数量
localforage.length(successCallback)
// 获取数据仓库中所有的key
localforage.keys(successCallback)
// 迭代数据仓库中的所有 value/key 键值对
localforage.iterate(iteratorCallback, successCallback)
```

链接传送门

# MDN---HTTP cookies

# MDN---Web storage API

# MDN---IndexedDB

# NPM---localforage

# 前端存储除了 localStorage 还有啥

Last but not least

如有不妥，请多指教呀~

avatar
文章
阅读
粉丝