// 打开了名为 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 操作很繁琐,且有一定使用门槛
-