除了缓存，浏览器还有哪些存储数据的方式？

一、简介

浏览器提供3种用于数据存储的 JavaScript APIs：cookie 、Web Storage API、IndexedDB。

二、cookie

cookie 是最早期用于存储键/值对数据的解决方案，但由于各种安全、无法存储复杂数据等问题，请使用另外两种方案。

// cookie 使用方法
document.cookie = "name=oeschger";
document.cookie = "favorite_food=tripe";
alert(document.cookie);	// name=oeschger;favorite_food=tripe

三、Web Storage API

浏览器提供 Web Storage API，能够存储键/值对数据，可完全替代 cookie 的存储解决方案。有两种使用场景：

1、Window.localStorage

用于本地存储，浏览器关闭后，再重新打开数据依然可用。

<!-- index.html -->
<!DOCTYPE html>
<html lang='zh-CN'>
<head>
    <meta charset="utf-8">
    <title>存储数据</title>
    <script>
        console.log("读取：" + localStorage.getItem('bgcolor'));
        localStorage.setItem('bgcolor', 'red');
    </script>
</head>
<body>
    <h1>打开 console 看输出结果！</h1>
</body>
</html>

2、Window.sessionStorage

为每个网站建立一个独立存储区来存储数据，在页面会话结束时清除数据。

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

四、IndexedDB_API

IndexedDB 用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs）），使用索引实现高性能搜索。IndexedDB采用异步操作，避免阻塞应用程序。

1、扩展库

IndexedDB API 功能强大但过于复杂，可使用下面扩展库降低开发难度。

名称	作用
localForage	把 IndexedDB、WebSQL、localStorage 封装成统一接口，如果浏览器不支持 IndexedDB 就退到 WebSQL 或 localStorage，保证存储功能的可用性。所有主流浏览器中都可用：Chrome，Firefox，IE 和 Safari（包括 Safari Mobile）。
Dexie.js	IndexedDB 的扩展库，简单易用。
ZangoDB	类似 MongoDB 的 IndexedDB 接口，支持 MongoDB 的大多数熟悉的过滤、投影、排序、更新和聚合功能。
JsStore	一个带有 SQL 语法的 IndexedDB 包装器。
MiniMongo	由 localstorage 支持的客户端内存中的 mongodb，通过 http 进行服务器同步。
PouchDB	用 IndexedDB 实现离线数据存储，并在联网后自动与 CouchDB 数据库进行数据同步。
idb	IndexedDB 扩展库，大小只有 1.05k，但让 IndexedDB 变的非常容易使用。
idb-keyval	IndexedDB扩展库，大小只有 600B，基于 Promise 用于存储键/值对，需要存储复杂数据请选择上面的 idb 扩展库。
lovefield	Lovefield 是一个用于 Web App 的关系型数据库，使用 JavaScript 编写，可以在不同的浏览器环境中运行，提供了类似 SQL 的 API，速度快、安全且易用。

五、参考文档

除了缓存，浏览器还有哪些存储数据的方式？

原文地址：https://cloud.tencent.com/developer/article/1925460