Html5本地存储
一、cookie(具体cookie的内容见文章)
使用场景,用户状态管理
1.存储大小限制 仅4k左右,且每次请求都会发送回服务器
2.单域名数量限制 50个左右
3.污染请求头,浪费流量
二、localStorage 和 sessionStorage
用法
1.使用setItem方法设置存储内容
2.使用getItem方法获取存储内容
3.使用removeItem方法删除存储内容
4.使用clear方法清除所有内容
5.使用length属性获取存储内容的个数
6.使用key方法获取存储字段
localStorage持久化,不会随着浏览器的关闭而失效,存储在硬盘中, 2.5MB 到 10MB 之间(各家浏览器不同)。可以设置数据的存储时间,过期数据清理,自行维护存储空间。不提供搜索功能,不能建立自定义的索引。
sessionStorage会随着网页会话结束而失效,存储在内存中。存储流量不一,部分浏览器不设限。
注意点
1.注意存储容量超出配额 超出后会抛出异常
2.存储类型的限制,仅能存储字符串 隐式的类型转换
3.sessionStorage失效机制
-刷新页面不会失效
-同一个域名下的不同标签不共享
三、indexedDB数据库
IndexedDB 就是浏览器提供的本地数据库,它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据,提供查找接口,还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言,IndexedDB 不属于关系型数据库(不支持 SQL 查询语句),更接近 NoSQL 数据库。
特点
(1)键值对储存。 IndexedDB 内部采用对象仓库(object store)存放数据。所有类型的数据都可以直接存入,包括 JavaScript 对象。对象仓库中,数据以"键值对"的形式保存,每一个数据记录都有对应的主键,主键是独一无二的,不能有重复,否则会抛出一个错误。
(2)异步。 IndexedDB 操作时不会锁死浏览器,用户依然可以进行其他操作,这与 LocalStorage 形成对比,后者的操作是同步的。异步设计是为了防止大量数据的读写,拖慢网页的表现。
(3)支持事务。 IndexedDB 支持事务(transaction),这意味着一系列操作步骤之中,只要有一步失败,整个事务就都取消,数据库回滚到事务发生之前的状态,不存在只改写一部分数据的情况。
(4)同源限制。 IndexedDB 受到同源限制,每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库,而不能访问跨域的数据库。
(5)储存空间大。 IndexedDB 的储存空间比 LocalStorage 大得多,一般来说不少于 250MB,甚至没有上限。
(6)支持二进制储存。 IndexedDB 不仅可以储存字符串,还可以储存二进制数据(ArrayBuffer 对象和 Blob 对象)。
对象接口关系
关系图.png简单事例
以数据库dataObj为例,创建一个person仓库,索引为name
1、打开或创建一个数据库
// 兼容性写法
window.indexedDB =
window.indexedDB ||
window.mozIndexedDB ||
window.webkitIndexedDB ||
window.msIndexedDB;
window.IDBTransaction =
window.IDBTransaction ||
window.webkitIDBTransaction ||
window.msIDBTransaction;
window.IDBKeyRange =
window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
// 兼容性写法
//打开或者新建数据库,如果数据库存在的时候就是打开,不存在的时候就是新建
//传入数据库的名称和版本号,版本号为整数如果省略,打开已有数据库时,默认为当前版本;新建数据库时,默认为1
//这是一个异步操作,但是会立刻返回一个 IDBOpenDBRequest 对象。
var request = window.indexedDB.open('dateObj', 1);
//删除数据库,调用deleteDatabase()方法以后,当前数据库的其他已经打开的连接都会接收到versionchange事件。
// window.indexedDB.deleteDatabase(databaseName);
// 新建数据库与打开数据库是同一个操作。如果指定的数据库不存在,就会新建。
// 不同之处在于,后续的操作主要在upgradeneeded事件的监听函数里面完成,因为这时版本从无到有,所以会触发这个事件。
var db;//数据库IDBDatabase对象
request.onupgradeneeded = function (event) {
console.log('新建数据库')
db = event.target.result;
var objectStore;
if (!db.objectStoreNames.contains('person')) { //检查数据库是否包含该对象仓库
// 只能在onupgradeneeded回调函数中创建存储空间,而不能在数据库打开后的success回调函数中创建。
// 删除仓库对象(删除表格) db.deleteObjectStore(objectStoreName);
// db.close():关闭数据库连接,实际会等所有事务完成后再关闭。
objectStore = db.createObjectStore('person', {
keyPath: 'id', //keyPath表示主键,(由于主键的值不能重复,所以上例存入之前,必须保证数据的email属性值都是不一样的),默认值为null
autoIncrement: true
//autoIncrement属性表示,是否使用自动递增的整数作为主键(第一个数据记录为1,第二个数据记录为2,以此类推),默认为false。
//一般来说,keyPath和autoIncrement属性只要使用一个就够了,如果两个同时使用,表示主键为递增的整数,且对象不得缺少keyPath指定的属性。
});
// IDBObject.createIndex()的三个参数分别为索引名称、指定根据存储数据的哪一个属性来构建索引、配置对象(说明该属性是否包含重复的值)。
//新建索引
objectStore.createIndex('name', 'name', {
unique: false//true的话表示不允许有重复的值
});
// 删除索引:objectStore.deleteIndex()
// 获取所有索引对象:objectStore.index()
}
// 如果指定的版本号,大于数据库的实际版本号,就会发生数据库升级事件upgradeneeded
request.onupgradeneeded = function (event) {
db = event.target.result;
}
//失败事件
request.onerror = function (event) {
console.log('数据库打开报错');
};
//成功事件
request.onsuccess = function (event) {
db = event.target.result;
//无论是创建还是打开数据库,最后都会进入onsuccess
console.log('数据库打开成功');
};
}
2、向person对象仓库写入数据记录
function add(db, name) {
// 事务函数transaction的第一个参数为需要关联的存储空间,第二个可选参数为事务模式。
// readonly(只读)和readwrite(读写)。添加数据使用readwrite,读取数据使用readonly。
// 第二个参数是可选的,省略时默认为readonly模式。
console.log('db', db.transaction(['person'], 'readwrite'))
var req = db.transaction(['person'], 'readwrite').objectStore('person').add({
name: name,
age: 29,
email: 'zhangsan@example.com'
});
req.onsuccess = function (event) {
console.log('db', db)
console.log('数据写入成功');
};
req.onerror = function (event) {
console.log('event', event)
console.log('数据写入失败');
}
}
3、在person对象仓库读取数据记录
function read(db) {//读取一条
var transaction = db.transaction(['person']);
var objectStore = transaction.objectStore('person');
var request = objectStore.get(1);//用主id去获取到对应的值
request.onerror = function (event) {
console.log('事务失败');
};
request.onsuccess = function (event) {
if (request.result) {
console.log('Name: ' + request.result.name);
console.log('Age: ' + request.result.age);
console.log('Email: ' + request.result.email);
} else {
console.log('未获得数据记录');
}
};
}
//使用索引获取到具体的值
function readItem(db, name) {
var store = db.transaction(['person'], 'readonly')
.objectStore('person')
var index = store.index('name')
// var request=index.count(name)//符合索引的值的数量
// var request=index.get(name)//只能获取到第一个匹配到的值
// var request=index.getAll(name)//获取到所有匹配到的值
// var request=index.getKey(name)//获取到第一个匹配到的值的主键的值
// var request=index.getAllKeys(name)//获取到所有匹配到的值的主键的值
var request = index.openCursor(name)
request.onsuccess = function (e) {
var result = e.target.result
console.log('result', result)
};
}
function readAll(db) {//读取全部
var objectStore = db.transaction('person').objectStore('person');
// objectStore.openCursor()用于获取一个指针对象。
// objectStore.openKeyCursor()用于获取一个主键指针对象。
objectStore.openCursor().onsuccess = function (event) {
var cursor = event.target.result;
if (cursor) {
console.log('Id: ' + cursor.key);
console.log('Name: ' + cursor.value.name);
console.log('Age: ' + cursor.value.age);
console.log('Email: ' + cursor.value.email);
cursor.continue();
} else {
console.log('没有更多数据了!');
}
};
}
4、在person对象仓库更新数据记录
function update(db) {
var request = db.transaction(['person'], 'readwrite')
.objectStore('person')
.put({
id: 1,
name: '李四',
age: 35,
email: 'lisi@example.com'
});
request.onsuccess = function (event) {
console.log('数据更新成功');
};
request.onerror = function (event) {
console.log('数据更新失败');
}
}
5、在person对象仓库删除数据记录
function remove(db) {
var request = db.transaction(['person'], 'readwrite')
.objectStore('person')
.delete(1);
request.onsuccess = function (event) {
console.log('数据删除成功');
};
}
四、参考文章
1、http://www.ruanyifeng.com/blog/2018/07/indexeddb.html
2、https://www.kancloud.cn/dodoke/html5-tutorial/1536642