浏览器提供3种用于数据存储的 JavaScript APIs:cookie 、Web Storage API、IndexedDB。
cookie 是最早期 用于存储 键/值对 数据的解决方案,但由于各种安全、无法存储复杂数据等问题,请使用另外两种方案。
// cookie 使用方法
document.cookie = "name=oeschger";
document.cookie = "favorite_food=tripe";
alert(document.cookie); // name=oeschger;favorite_food=tripe
浏览器提供 Web Storage API,能够存储 键/值对 数据,可完全替代 cookie 的存储解决方案。有两种使用场景:
用于本地存储,浏览器关闭后,再重新打开数据依然可用。
<!-- 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>
为每个网站建立一个独立存储区来存储数据,在页面会话结束时清除数据。
// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');
// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');
// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');
// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();
IndexedDB 用于在客户端存储大量的结构化数据(也包括文件/二进制大型对象(blobs)),使用索引实现高性能搜索。IndexedDB采用异步操作,避免阻塞应用程序。
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 删除。