【学习日记】indexDB、vNode、sticky 2020-9-2

最新推荐文章于 2023-11-25 17:33:32 发布

Troy_boi

最新推荐文章于 2023-11-25 17:33:32 发布

阅读量281

点赞数

分类专栏：学习日记

本文链接：https://blog.csdn.net/weixin_43668630/article/details/108420041

版权

学习日记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

indexDB

cookie:验明用户信息，只能存4k
sessionStorage、localStorage：存储空间更大5m，本地存储，可以做到永久性存储。
indexedDB：解决本地存储量太小问题，浏览器提供的本地数据库。基于同源策略，支持异步。存储大量数据的方法，它创造的数据可以被查询，并且可以离线使用。

window.indexedDB判断是否支持indexedDB，使用open方法，创建一个数据库，名字为“dataNames”，就可以通过onupgradeneeded事件、onsuccess事件、onerror事件，
onupgradeneeded事件往数据库里增加表，onsuccess增加index。往表里增删改查时都需要使用transaction创建事务，然后使用add、delete方法实现增加和删除，index实现查找，openCursor

 
var request=window.indexedDB.open("dataNames",3);
//如果要删除数据库：indexDB.deleteDatabase('数据库名');
var db;
 
//数据库打开(已有就打开，没有就创建后打开)成功事件
request.onsuccess=function(ev){
//拿到数据库实例对象，其中包含了对数据库表的的创建编辑等功能
	db=ev.target.result;
	//调用add方法向我们创建的数据库表中添加数
	add();
};
//数据库版本升级事件
request.onupgradeneeded=function(ev){
//拿到数据库实例对象，其中包含了对数据库表的的创建编辑等功能
	db=ev.target.result;
	var objectStore;
	//判断我们要创建的person表是否已经存在，数据库实例的objectStoreNames中放的是我们的所有表的集合
	//contain方法查看数据库表集合中是否存在某种表
	if(!db.objectStoreNames.contains('person1')){
//使用数据库实例的createObjectStore方法创建对象仓库(其实就是数据表),第一个参数字符串就是数据表名，第二个表示
//设置这个表中的id为主键(主键是唯一的，方便迅速索引查找)
		objectStore=db.createObjectStore('person1',{keyPath:'id'});
		console.log(objectStore);
//使用createIndex为这个数据表添加索引（其实就是列名），三个参数分别是：列名，列名所在属性，配置对象(是否包含重复的值)
		objectStore.createIndex('name','name',{unique:false});
		objectStore.createIndex('email','email',{unique:true});
	}
};
//数据库打开失败事件
request.onerror=function(e){
	console.log("数据库启动失败")
}
 
//add方法用来项数据库中存入数据
function add(){
//indexedDB数据库的读写都是通过事务来完成的，
//通过数据库对象实例.transaction(['表名'],‘只读或读写’)来创建一个指定表的事务
//只读：read，不能修改数据库数据，可以并发执行
//读写：readwrite，可以进行读写操作
//版本变更：verionchange
	var request=db.transaction(['person1'],'readwrite');
//通过创建的表事务的pbjectStore(‘表名’)拿到我们要的数据库指定表对象
	request=request.objectStore('person1');
//通过表对象的add方法向数据库中写入数据返回一个IDBRequest对象，对手上的onsuccess事件是数据写入成功事件，onerror是数据写入失败事件
	console.log(request);
	request=request.add({id:4,name:'王阔',age:24,email:'wangkuo@example.com'});
 
	//数据写入成功
	request.onsuccess=function(event){
		console.log('数据写入成功');
	};
	console.log(request);
	//数据写入失败
	request.onerror=function(event){
		console.log('数据写入失败');
	}
}

vue模版转化为视图的过程

1、将template模版转化为渲染函数，执行渲染函数就可以得到一个虚拟节点树。
2、在对model进行操作时，改变data，触发dep函数来update视图层。这一过程主要是将新旧虚拟节点进行差异对比，根据对比结果进行DOM操作改变视图层。

渲染函数：将模版编译成渲染函数，渲染函数可以生成虚拟节点树。
vnode：虚拟节点，为一个js对象，可以代表一个真实的节点。【通过createElement函数可以将虚拟节点渲染为DOM节点。】，是真实DOM节点的抽象。vnode至少包含tag，attrs，children三个属性。
Vnode渲染过程