版权声明：本文为博主原创文章，若文章中有错误请联系博主改正，请不要恶意留言(不喜欢请绕道)。欢迎大家转载，转载时请注明原文地址:https://blog.csdn.net/qq_37674616/article/details/82713840
目录
Web Storage
Web Storage的目的是克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无需持续地将数据发回服务器。
主要目标:
提供一种在cookie之外存储回话数据的用途
提供一种存储大量可以跨回话存在的数据的机制
Stroage 方法
setItem(name,value): 为指定的name设置一个对应的值
getItem(name)： 根据指定的名字name获取对应的值
key(index): 获取index位置处的值的名字
removeItem(name): 删除有name指定的名值对。
Storage事件
对Storage对象进行任何修改时，都会触发storage事件。该事件的event对象有以下属性
1.domain: 发生变化的存储空间的域名
2.key: 设置或者删除的键名
3.newValue:如果是设置值，则是新值；如果是删除键，则是null
4.oldValue:键被更改之前的值
sessionStorage与localStorage
他们都是Storage的一个实例，因此Sorage的方法他们都可以使用。
sessionStorage
只保存在当前选项卡使用(一次回话)
localStorage
当前浏览器可以使用
使用
<form action="">
用户名:<input type="text" name="username">
年龄: <input type="text" name="age">
</form>
<button>保存</button>
<button>显示</button>
<span></span>
<script>
var btns=document.getElementsByTagName('button');
var inputs=document.getElementsByTagName('input');
var span=document.getElementsByTagName('span')[0];
btns[0].onclick=function(){
//数据保存
sessionStorage.setItem(inputs[0].name,inputs[0].value);
sessionStorage.setItem(inputs[1].name,inputs[1].value);
}
btns[1].onclick=function(){
span.innerText=sessionStorage.getItem(inputs[0].name)+'--'+sessionStorage.getItem(inputs[1].name);
}
</script>IndexedDB
它是一种类似SQL数据库结构化数据存储机制。它的数据不是保存在表中，而是保存在对象存储空间中(对象仓库)。一个IndexedDB数据库，就是一组位于相同命名空间下的对象的集合。
indexedDB对象
open(name,version)
请求连接指定name和version的数据库，如果指定name的数据库不存在,则利用name和version创建一个数据库。
参数: 数据库名称，数据库版本
返回值 IDBOpenDBRequest的一个实例对象
var request=indexedDB.open('admin','1.0');
console.log(request);//IDBOpenDBRequest实例deleteDatabase(name)
删除指定name的数据库
IDBOPenDBRequest对象
success
数据库创建成功之后触发的事件
error
数据库创建失败触发的事件
upgradeneeded
版本更新之后触发的事件，一般在这里获取数据库对象或者创建对象仓库
result
IDBDatabase对象
var request=indexedDB.open('admin','1.0');
request.onsuccess=function(){
//在这里获取数据库对象 (reesult)
//有三种方法获取
console.log(this.result); ////IDBDatabase
console.log(request.result);
console.log(event.target.result);
console.log('success');
}
request.onerror=function(){
//打印错误信息
console.log(this.error.message);
}
request.onupgradeneeded=function(){
console.log('版本更新');
}IDBDatabase构造函数
ObjectStoreNames
获取所有对象仓库的名称。
close()
关闭数据库
createObjectStore(storeName,optionalParameters)
创建对象仓库
参数
storeName 要创建的对象仓库名
optionalParameters 可选，参数值为一个Js对象，该对象有以下属性
keyPath 用于指定对象仓库中的每一条记录使用哪个属性值来作为主键值
autoIncrement 取值为布尔值。true表示主键自增。
deleteObjectStore()
删除指定名字的对象仓库
var request = indexedDB.open('admin', '4.0');
request.onupgradeneeded = function() {
var db = request.result; //返回IDBDataBase实例
//创建对象仓库
//首先判读要创建的仓库是否存在 存在的话删除 不存在则创建
if (db.objectStoreNames.contains('user')) {
db.deleteObjectStore('user');
} else {
db.createObjectStore('user', {
keyPath: 'id',
autoIncrement: true
});
}
}transaction(arr[],mode)
获取事物对象
参数
arr[] 表示一些对象仓库名组成的一个字符串数组，用于定义事务的所用范围。
mode:可选参数，用于定义事务的读写模式，readyOnly或 readwrite
返回值 IDBTransaction
var request=indexedDB.open('admin','4.0');
request.onsuccess=function(){
var db=request.result; //IDBDatabase
var ts=db.transaction('user','readwrite');
console.log(ts);//返回IDBTransaction实例
var store=ts.objectStore('user'); //返回 IDBObjectStore
}IDBTransaction原型中方法
objectStore(storeName)
获取指定名字的对象仓库
参数:要获取的仓库名
返回值 IDBObjectStore实例
IDBObjectStore 构造函数
返回值 IDBRequest对象
put(obj)
添加数据，重复添加会更新原有数据
add(obj)
添加数据，重复添加会报错
get(key)
通过主键获取数据
getAll()
获取所有数据
delete(key)
通过主键删除数据
clear()
删除所有数据
IDBRequest构造函数
error
失败之后触发
success
成功之后触发的事件
result
结果集
var request=indexedDB.open('admin','4.0');
request.onsuccess=function(){
var db=request.result; //IDBDatabase
var ts=db.transaction('user','readwrite');
console.log(ts);//返回IDBTransaction实例
var store=ts.objectStore('user'); //返回 IDBObjectStore
var obj={
name:'cc',
age:'22',
gender:'male'
}
var rq=store.put(obj);
console.log(rq);//IDBrequest的实例
rq.onsuccess=function(){
console.log('添加成功');
console.log(rq.result);
}
rq.onerror=function(){
console.log('添加失败',rq.error);
}
}完整案例
<button>增加数据</button>
<button>删除数据</button>
<button>查找数据</button>
<script>
var btns = document.getElementsByTagName('button');
var db;
//创建数据库
var request = indexedDB.open('admin', '1.0');
request.onsuccess = function() {
console.log('创建成功');
db = this.result;
}
request.onerror = function() {
console.log('创建数据库失败');
}
request.onupgradeneeded = function() {
console.log('数据库版本更新');
var db = this.result;
//创建对象仓库
if (db.objectStoreNames.contains('user')) {
db.deleteObjectStore('user');
}else{
db.createObjectStore('user', {
keyPath: 'id',
autoIncrement: true
});
}
}
//添加数据
btns[0].onclick = function() {
//设置对象仓库事务
var ts = db.transaction('user', 'readwrite');
//得到对象仓库
var store = ts.objectStore('user');
var obj = {
name: 'cc',
age: 12,
gender: 'famle'
}
var rq = store.put(obj);
rq.onsuccess = function() {
alert('添加成功');
console.log(this.result);
}
rq.onerror = function() {
alert('添加失败');
console.log(this.error);
}
}
//删除数据
btns[1].onclick = function() {
var ts = db.transaction('user', 'readwrite');
var store = ts.objectStore('user');
var rq=store.delete(1);
rq.onsuccess=function(){
console.log('删除成功',this.result);
}
rq.onerror=function(){
console.log('删除失败',this.error);
}
}
//查找数据
btns[2].onclick = function() {
var ts = db.transaction('user', 'readwrite');
var store = ts.objectStore('user');
var rq=store.getAll();
rq.onsuccess=function(){
console.log('查找成功',this.result);
}
rq.onerror=function(){
console.log('查找失败',this.error);
}
}
</script>