关于前端IndexedDB的使用且和Cookie、Web Storage 的区别

// 打开了名为 pku 的数据库，如果不存在，浏览器会自动创建
			const request = window.indexedDB.open('pku');
			var db; // 全局 IndexedDB 数据库实例
			// 在版本改变时触发 首次连接数据库时，版本从 0 变成 1，因此也会触发，且先于 onsuccess
			request.onupgradeneeded = function(event) {
				db = event.target.result;
				console.log('version change');
				if (!db.objectStoreNames.contains('student')) {
					db.createObjectStore('student', {
						keyPath: 'id', // 主键
						autoIncrement: true // 自增
					});
					
					
				}else{
					console.log(db)
				}
			};
			// 在连接成功后触发
			request.onsuccess = function(event) {
				db = request.result;
				
				// 异步事件  
				const adding = db.transaction(['student'], 'readwrite') // 创建事务
					.objectStore('student') // 指定 student 表
					// 添加数据
					.add({name: 'HSH',age: 27});
				// 添加成功的返回
				adding.onsuccess = function(event) {
					console.log('write success');
				};
				// 添加失败的返回
				adding.onerror = function(event) {
					console.log('write failed');
				}
				// 如果要获取数据，需要一个 readonly 的 Transaction
				const requestss = db.transaction('student', 'readonly')
				  .objectStore('student')
				  .get(1); // 获取 id 为 2 的数据
				// 获取的返回
				requestss.onsuccess = function (event) {
				  console.log(event.target.result) // { id: 2, name: 'elaine', age: 23 }
				}
			};
			// 在连接失败时触发
			request.onblocked = function(event) {
				console.log('db request blocked!')
			}
			// 在连接被阻止的时候触发，比如打开版本低于当前存在的版本
			request.onerror = function(event) {
				console.log('error!');
			};

• Cookie

  • 能被服务器指定，浏览器会自动在请求中带上

  • 大小只有 4kb

  • 大规模应用于广告商定位用户

  • 配合 session 也是一个可行的登录鉴权方案

• Web Storage

  • 大小有 10MB，使用极其简单

  • 但是只能存字符串，需要转义才能存 JS 对象

  • 大部分情况下能完全替代 Cookie，且更安全

  • 配合 token 可以实现更安全的登录鉴权

• IndexedDB

  • 储存空间无上限，功能极其强大

  • 原生支持 JS 对象，能更好的储存数据

  • 以数据库的形式储存数据，数据管理更规范

  • 但是，原生 API 操作很繁琐，且有一定使用门槛