除了缓存，浏览器还有哪些存储数据的方式？
原创除了缓存，浏览器还有哪些存储数据的方式？
原创
一、简介
浏览器提供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 功能强大但过于复杂，可使用下面扩展库 降低开发难度。
名称 | 作用 |
|---|---|
把 IndexedDB、WebSQL、localStorage 封装成统一接口，如果浏览器不支持 IndexedDB 就退到 WebSQL 或 localStorage，保证存储功能的可用性。所有主流浏览器中都可用：Chrome，Firefox，IE 和 Safari（包括 Safari Mobile）。 | |
IndexedDB 的扩展库，简单易用。 | |
类似 MongoDB 的 IndexedDB 接口，支持 MongoDB 的大多数熟悉的过滤、投影、排序、更新和聚合功能。 | |
一个带有 SQL 语法的 IndexedDB 包装器。 | |
由 localstorage 支持的客户端内存中的 mongodb，通过 http 进行服务器同步。 | |
用 IndexedDB 实现离线数据存储，并在联网后自动与 CouchDB 数据库进行数据同步。 | |
IndexedDB 扩展库，大小只有 1.05k，但让 IndexedDB 变的非常容易使用。 | |
IndexedDB扩展库，大小只有 600B，基于 Promise 用于存储 键/值对，需要存储复杂数据请选择上面的 idb 扩展库。 | |
Lovefield 是一个用于 Web App 的关系型数据库，使用 JavaScript 编写，可以在不同的浏览器环境中运行，提供了类似 SQL 的 API，速度快、安全且易用。 |
五、参考文档
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。