在项目开发过程中，前端一般都需要存储大量的数据。我们经常会用到cookie,localstorage等方法，但是这些都有存储长度限制。为了解决这个问题，我们今天给大家介绍一个新的存储方法indexedDB。
存储方法性能对比：
| 特性 | cookie | localStorage | sessionStorage | indexedDB |
|---|---|---|---|---|
| 数据生命周期 | 一般由服务器生成，可以设置过期时间；前端采用和js-cookie等组件也可以生成 | 除非被清理，否则一直存在；浏览器关闭还会保存在本地，但是不支持跨浏览器 | 页面关闭就清理刷新依然存在，不支持跨页面交互 | 除非被清理，否则一直存在 |
| 数据存储大小 | 4K | 5M | 5M | 不限制大小 |
| 与服务端通信 | 每次都会携带在请求的header 中，对于请求性能有影响；同时由于请求中都带有，所以也容易出现安全问题 | 不参与 | 不参与 | 不参与 |
| 特点 | 字符串键值对在本地存储数据 | 字符串键值对在本地存储数据 | 字符串键值对在本地存储数据 | IndexedDB 是一个非关系型数据库（不支持通过 SQL 语句操作）。可以存储大量数据，提供接口来查询，还可以建立索引，这些都是其他存储方案无法提供的能力。 |
indexedDB 是一个浏览器端储存大量结构化数据的 API，是一个异步的 JavaScript API，用于在客户端存储和读取数据。
indexedDB用法介绍：
// 打开数据库
var openRequest = indexedDB.open("myDatabase", 1);
openRequest.onupgradeneeded = function() {
var db = openRequest.result;
if (!db.objectStoreNames.contains('myStore')) { // 如果还没有 myStore 对象仓库
db.createObjectStore('myStore', {keyPath: 'id'}); // 创建一个叫 'myStore' 的新对象仓库，并指定主键为 'id'
}
};
openRequest.onerror = function() {
console.error("Error", openRequest.error);
};
openRequest.onsuccess = function() {
var db = openRequest.result;
// 获取对象仓库
var store = db.transaction('myStore', 'readwrite').objectStore('myStore');
// 添加数据
var addRequest = store.put({id: 1, name: "小明", school: '清北'});
addRequest.onerror = function() {
console.error("Error", addRequest.error);
};
// 读取数据
var getRequest = store.get(1);
getRequest.onsuccess = function() {
console.log(getRequest.result); // 输出：{id: 1, name: "小明", school: '清北'}
};
};
Motion Vue：无需编写复杂的命令式代码，轻松实现动画效果
ButtonsGenerator：一个免费的CSS按钮在线生成工具
汇聚全网热榜API，包括百度/微博/哔哩/抖音/今日头条/百度贴吧等等
上面是“前端存储方法对比之indexedDB”的全面内容，想了解更多关于 前端知识 内容，请继续关注web建站教程。
当前网址：https://m.ipkd.cn/webs_5115.html
声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！
