1.Storage
2.webSQL 数据库操作
3.Indexeddb 数据库操作
在HTML5本地存储中，Web SQL Database实际上已经被废弃，而HTML5的支持的本地存储实际上变成了Web Storage（Local Storage和Session Storage）与IndexedDB。Web Storage使用简单字符串键值对在本地存储数据，方便灵活，但是对于大量结构化数据存储力不从心，IndexedDB是为了能够在客户端存储大量的结构化数据，并且使用索引高效检索的API。Storage
setItem(key,value);
getItem(key);
1.sessionStorage:只在不关闭浏览器的情况下 数据有效，只要关闭掉浏览器就会 清除保存的数据
2.localStorage：只要不清楚缓存 保存到浏览器的数据 一直存在indexedDB
indexedDB是一个nosql ,都是以对象的方式区存储
indexedDB的基本操作
1. 打开数据库并且开始一个事务。（事务 一个平台 演员的舞台 是一个可以提供表演的地方）
2. 创建一个 object store。
3. 构建一个请求来执行一些数据库操作，像增加或提取数据等。
4. 通过监听正确类型的 DOM 事件以等待操作完成。
5. 在操作结果上进行一些操作（可以在 request 对象中找到使用流程：(1.打开数据库2.建表3.增删改查)
1. 判断浏览器 是不是 支持 indexedDB
indexedDB?alert(“支持indexedDB”):alert(“不支持indexedDB”);
2.打开/创建数据库
indexedDB.open(“数据库的名字”); -> IDBOpenDBRequest
IDBOpenDBRequest:
监听事件：
onerror:创建或者 打开数据库 失败的时候 调用
onsuccess：创建或者 打开数据库成功 的时候 调用
Onupgradeneeded：只在数据库的版本号 被更新的时候调用
3.创建类似于BMOB里面 的某个表（也可以想象为是一个数据模型）
通过ObjectStore进行操作（增删改查建表）
1.建表(创建类)数据库的对象.createObjectStore(“表名字”，设置唯一字段（设置这个类里面 可以找到某一个对象的属性）);
2.创建字段（给创建的类 添加属性）ObjectStore的对象.createIndex(“属性名”，”key“);
4.增删改查的操作
objectStore.add() 增
objectStore.delete()删
objectStore.put()改
objectStore.get()查代码示例：
1. 打开数据库
function openDB() {
var request = indexedDB.open("noteDB",1);
request.onerror = function (errror) {
console.log(errror);
};
request.onsuccess = function () {
console.log("打开数据库成功");
};
//只在数据库版本号 两次不一致的情况下 调用
request.onupgradeneeded = function () {
console.log("更新数据库成功",this);
};
}2.建表
从没有数据库到有数据库、数据库的版本号更新的时候 再去建表。
查询 数据库中 是不是存在 同样的表 如果存在 也别创建了
onupgradeneeded 可以监听数据库版本号的变更
可以通过IDBDataBase里面的objectStoreNames 查看数据库里面 都创建了 哪些表名
var tableName = "note";
// 可以通过objectStoreNames获取到 已经建好表的名字
if (!db.objectStoreNames.contains(tableName)){
// 建表
var objectStore = db.createObjectStore(tableName);
// 创建表里面的字段
// 创建字段的时候 需要 至少传入两个参数
// 1.字段的名字 2.可以通过哪个名字 查找到 这个字段对应的内容
objectStore.createIndex("title","title");
objectStore.createIndex("content","content");
objectStore.createIndex("date","date");
}- 增删改查的操作
1）db -> transaction()-> 事务的对象2）事务的对象-> objectStore3）objectStore -> 增删改查
添加数据
functionaddData(info) {
returnobjectStore.add(info);
}
查询数据GetgetAll functionsearchAll() {
returndatabase.transaction([“note”],”readonly”).objectStore(“note”).getAll();
}
会得到一个IDBRequest对象，可以通过监听成功事件 获得到查询到的数据searchAll().onsuccess=function() {
console.log(this.result);
};
如果查询单个key对应的数据可以通过get(key)database.transaction([“note”],”readonly”).objectStore(“note”).get(1502242969880).onsuccess=function() {
console.log(this);
};
删除数据
.delete(1502242969880).onsuccess=function() {
console.log(this);
};
更新数据
. put({title:”更新数据”,content:”更据”,date:1502183031380}).onsuccess=function() {
console.log(this);
};
需要注意的事项：任何数据库的操作 更新字段、表需要先清除原来的数据库如果是查找、删除、修改具体的内容的时候需要根据一个唯一值查找
//添加数据
function addData(info) {
//获得到事务的对象
var transaction = database.transaction(["note"],"readwrite");
//存放某一种类型数据的容器（类似类）
var objectStore = transaction.objectStore("note");
// 执行增删改查的操作
return objectStore.add(info);
}//查询数据的方法
function searchAll(){
return database.transaction(["note"],"readonly").objectStore("note").getAll();
}
//get查询方法
function search(){
database.transaction(["note"],"readonly").objectStore("note").get(1502194444741).onsuccess=function(){
console.log(this);
}
}//删除的方法
function deleteData(){
database.transaction(["note"],"readwrite").objectStore("note").delete(1502194444741).onsuccess=function(){
console.log(this.result);
}
}//更新的方法
function update(){
database.transaction(["note"],"readwrite").objectStore("note").put({title:"更新的数据",content:"更新的数据",date:1502183031380}).onsuccess=function(){
console.log(this);
}
}完整js代码
(function(){
//声明数据库对象
var database = null;
//创建 打开数据库DB(database)
function openDB(){
var request = indexedDB.open("noteDB",7); // 创建 一个数据库 后面的数子代表数据库的版本号 没刷新一次 版本号就要更新一次 不然在第二次跟新的是很好就不会打印17行的this
request.onerror = function(error){ //打开失败的方法
console.log(error)
};
request.onsuccess = function(){ //打开成功
console.log("打开数据库成功")
database = this.result;
//console.log(searchAll())
searchAll().onsuccess = function(){ console.log(this.result) }
//调用get查询方法
search()
//删除方法
deleteData()
//更新方法
update()
};
//只在 数据库版本号 两次不一致的情况下 调用 再次调用不执行
request.onupgradeneeded = function(){ //刷新数据库
//再见表的时候 不需要每次都去建表，可以在数据库更新版本号上午时候去创建版本号
console.log("打开数据库成功",this);
//获取数据库对象
var db = this.result;
//可以同objectStoreNames获取到已建好表的名字
var tableName = "note";
if(!db.objectStoreNames.contains(tableName)){ //console.log("可以建表了"); //创建表 keyPath既可以接受当前类的属性 也可以接受关系类的属性 var objectStore = db.createObjectStore(tableName,{keyPath:"date"}); //创建表里面的字段 //创建字段的时候 需要至少传入两个参数 //1.字段的名字 2.可以通过那个名字 查找到相应的字段内容 objectStore.createIndex("title","title"); objectStore.createIndex("content","content"); objectStore.createIndex("date","date") }
};
}
//添加数据方法
function addData(info){
//获得到事物的对象 传连个参数 第一个是一个note数组 第二个是 读取方式为读写
//注意这里一个有三种读写数据的方式 readwrite（读写）readonly(只读) versionchange()
var transaction=database.transaction(["note"],"readwrite")
//存放某一只类型数据的容器（类似类）
var objectStore = transaction.objectStore("note");
//执行增删改查的操作
console.log(objectStore.add(info))
}
//查询数据的方法
function searchAll(){
return database.transaction(["note"],"readonly").objectStore("note").getAll();
}
//get查询方法
function search(){
database.transaction(["note"],"readonly").objectStore("note").get(1502194444741).onsuccess=function(){
console.log(this);
}
}
//删除的方法
function deleteData(){
database.transaction(["note"],"readwrite").objectStore("note").delete(1502194444741).onsuccess=function(){
console.log(this.result);
}
}
//更新的方法
function update(){
database.transaction(["note"],"readwrite").objectStore("note").put({title:"更新的数据",content:"更新的数据",date:1502183031380}).onsuccess=function(){
console.log(this);
}
}
//获取html中的标签 并赋予点击事件
function loadView(){
var titleInput = document.querySelector(".addNoteView input");
var contentInput = document.querySelector(".addNoteView textarea");
var saveButton = document.querySelector(".addButton");
saveButton.onclick=function(){
var title = titleInput.value;
var content = contentInput.value;
var timeStamp = new Date().getTime();
//把页面输入的信息数据一addData()传到数据库中
addData({ title:title, content:content, date:timeStamp })
}
}
//浏览器是否支持
function init(){
if(!indexedDB){ //判断 当没有这个数据库的时候 跳出函数
return;
}
openDB(); //在有这个数据库的是很好 调用函数打开数据库
loadView(); //调用函数引入页面中的数据 传到数据库
}
init()
})()
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
