php indexdb,前端存储 (4) - IndexDB
IndexDB的出现 是为了存储更大量的结构化数据
简介
IndexedDB是一个事务型数据库系统,类似于基于SQL的RDBMS。 然而不同的是它使用固定列表(只有 key,value),IndexedDB是一个基于JavaScript的面向对象的数据库。
IndexedDB允许您存储和检索用键索引的对象; 可以存储structured clone algorithm支持的任何对象。
您只需要指定数据库模式,打开与数据库的连接,然后检索和更新一系列事务中的数据。
IndexedDB 是非关系型数据库
IndexDB 和 WebSql的差别
WebSql 是关系型数据库, 前端需要写sql ,目前 WebSql已经浏览器基本已经放弃
基本使用
1.打开数据库并且开始一个事务。
2.创建一个 object store。
3.构建一个请求来执行一些数据库操作,像增加或提取数据等。
4.通过监听正确类型的 DOM 事件以等待操作完成。
5.在操作结果上进行一些操作(可以在 request 对象中找到)
var dbName = "the_name";
var db ;
// 连接数据库,没有就创建数据库
var request = indexedDB.open(dbName, 2);
request.onsuccess = function(event){
db = request.result;
}
// 错误处理程序在这里。
request.onerror = function(event) {
console.log(event);
};
request.onupgradeneeded = function(event) {
db = event.target.result;
// 创建一个对象存储空间来, 自增主键
var objectStore = db.createObjectStore("customers");
};
// 添加数据
var customerData = [
{ id:"1", name: "Bill", age: 35, email: "bill@company.com" },
{ id:"2", name: "Donna", age: 32, email: "donna@home.org" }
];
var transaction = db.transaction(dbName, "readwrite");
// 打开存储对象
var objectStore = transaction.objectStore('customers');
// 添加到数据对象中
customerData.forEach(function(item){
objectStore.put(item,item.id);
});
// 查询
db.transaction("customers").objectStore("customers").get("1").onsuccess = function(event) {
console.log(event.target.result.name);
};
存储大小 50MB 左右
应用场景
跨 Tab 通信
存储二进制 文件
php indexdb,前端存储 (4) - IndexDB相关推荐
- indexDB本地存储
HTML5新增了一种被称为indexDB的数据库,indexDB数据库是一种存储在客户端本地的NOSQL数据库. indexDB是一个对象数据库,而不是关系数据库. 1.创建(打开)本地数据库 // ...
- java localstorage_前端存储除了 localStorage 还有啥
原标题:前端存储除了 localStorage 还有啥 来自公众号: 全栈修仙之路 前端的数据存储方式,你除了用过 Cookies.localStorage 和 sessionStorage 外,还有 ...
- Web/前端存储简述
Web/前端存储 Web/前端存储分为cookie和WebStorage: 1.cookie存储 特点:产生于服务器端,保存在客户端,同一服务器下保存的cookie数据共享,不同服务器的不共享,传输数 ...
- 前端存储之cookie、localStorage、sessionStorage、indexDB
cookie Cookie 是小甜饼的意思.顾名思义,cookie 确实非常小,它的大小限制为4KB左右,是网景公司的前雇员 Lou Montulli 在1993年3月的发明.它的主要用途有保存登录信 ...
- 有关cookie:验证_token、CSRF攻击、保存信息_cookie与本地存储、indexDB、
浏览器"同源策略": ajax跨域限制.iframe跨域限制. LocalStorage跨域限制.Cookie跨域限制. W3C标准的浏览器:运行在不同域的JavaScript无法 ...
- indexDB 前端操作
indexDB 是一种低级api ,用于客户端存储大量结构化数据.该api使用索引来实现对该数据的高性能搜索. 为应用提供离线版本 indexdb 特点 键值存储. IndexedDB 内部采用对象仓 ...
- 前端学习(1776):前端调试之indexDB原理和查看
- 萌新必看—10种前端存储哪家强,一文读尽!
作者:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文链接:https://segmentfault.com/a/1190000040147911 点击上方 程序员成长指 ...
- Web Storage 前端存储
1.Web Storage 许多小伙伴在学习前端的时候都有一个想法,自己只能写一些静态的数据,如果想动态加载数据的话,就要学习数据库,例如mysql.Sql Serve.oracle等,光学数据库还不 ...
最新文章
- 京东向下沉市场打出“京喜”,拼多多和阿里惊不惊喜?
- 计算php代码执行时间长短的类
- 主体ubuntu16.04,宿体virtualbox下的windows7的共享文件夹设置
- php开发工具 debug,php开发性能调试工具xdebug
- Thinking In Java 读书笔记
- 安装默认报表服务器虚拟目录,报表服务器虚拟目录
- Spring-context-ConfigurationClassUtils类
- maya多边形建模怎样做曲面_maya中的曲面模型怎么转换成多边形?
- win10下Miracast无线投屏使用教程及异常解决方案(超详细)
- Spark大数据计算引擎介绍
- 定义平行四边形类,继承四边形类,增加判断是否为平行四边形的函数
- matlab 直方图
- ui界面设计是什么:ui设计常用软件
- Spring总结四:JDBC操作
- logistic函数,sigma函数性质
- 企业上云计划:上云前应该考虑哪些因素
- OJ sdust Java记录
- python解一元二次方程
- 数组、字符串长度的计算
- WordPress搭建个人博客网站
热门文章
- 华夏学院到新洲的大巴车发车时刻表及乘车地点
- python中种子数是什么意思_Python shuffle():其种子数的粒度/shuffle()结果多样性...
- 百度人工智能AIP的调用方法
- 网吧服务器系统重做,快速换服务器系统的方法介绍
- SkyWalking 毕业成为 Apache 顶级项目,可搭配 Spring Cloud、Dubbo 一起食用
- 《失恋33天》观后感
- 最流行的经典爱情语句
- 提升你开发技能的 8 个提示(转)
- 小程序离线消息通知、消息推送
- Qt 之按钮鼠标 悬浮、按下、松开后的效果