浅谈:HTML5中数据存储的方式:
来源:互联网 发布:桌面世界时钟软件 编辑:程序博客网 时间:2024/06/02 03:35
HTML5中数据存储的方式:
1.storage
2.webSQL(数据库)
3.IndexedDB(数据库操作)
storage:
两个方法:
setltem(key,value);
getitem(key);
1.sessionStorage:只在不关闭浏览器的情况下,数据有效,
只要关闭掉浏览器就会,清除保存的数据;
2.localStorage:只要不清除缓存,保存到浏览器的数据,一直存在;
IndexedDB是一个NOSQL,都是以对象的方式去存储;
indexedDB的基本操作:
- 打开数据库并且开始一个事务。(事务:一个平台)
- 创建一个 object store。
- 构建一个请求来执行一些数据库操作,像增加或提取数据等。
- 通过监听正确类型的 DOM 事件以等待操作完成。
- 在操作结果上进行一些操作(可以在 request 对象中找到)
使用流程(1.打开数据库 2.建表 3.增删改查)
1.判断浏览器是不是支持 indexedDB
indexedDB?alert("支持"):alert("不支持");
2.打开数据库
// 打开/创建数据库var request = window.indexedDB.open("MyTestDatabase");
indexedDB.open("MyTestDatabase"); -> IDBOpenDBRequest
IDBOpenDBRequest :
监听事件:生成处理函数
①request.onerror= function(event) { // Do something with request.errorCode!};
创建或者打开数据库失败的时候,调用
②request.onsuccess = function(event) { // Do somethingwith request.result!};
创建或者打开数据库成功的时候,调用
③该事件仅在较新的浏览器中被实现request.onupgradeneeded = function(event) {
// 更新对象存储空间和索引 .... };
只在数据库的版本号,更新的时候调用
3.创建类似于BMOB里面的某个表(也可以想象为是一个数据模型)
通过ObjectStorage进行操作(增删改查建表)
①.建表(创建类):使用数据库的对象
.createObjectStore("名字",设置唯一字段(设置这个类里面可以找到某一个对象的属性));
②.创建字段(给创建的类,添加属性)ObjectStore的对象 .createIndex("属性名");
4.增删改查的操作
objactStore.add():
objactStore.delete():
objactStore.put();
objactStore.get();
代码示例:
1.打开数据库:
(function () {
//创建、打开数据库(database)
function openDB() {
var request = indexedDB.open("noteDB",1);
request.onerror = function (error) {
console.log(error);
};
request.onsuccess = function () {
console.log("打开数据库成功");
};
//只在数据库版本号两次不一致的情况下,调用
request.onupgradeneeded = function () {
//在建表的时候,不需要每次都去创建,
//可以在数据库更新版本号再创建
console.log("更新数据库成功",this);
};
}
//浏览器是不是支持
function init() {
if(!indexedDB){
return;
}
}
openDB();
})();
2.建表
从没有数据库到有数据库、数据库的版本号更新的时候,再去建表。
查询数据库中是不是存在同样的表,如果存在,不创建;
onupgradeneeded 可以监听数据库版本号的变更;
可以通过 IDBDatabase 里面的 objectStoreNames 查看数据库里面都创建了哪些表名
var objectStore = db.createObjectStore(tableName);
//创建表里面的字段(列)
//创建字段的时候,需要至少传入两个参数
//1.字段的名字2.可以通过哪个名字,查找到这个字段对应的内容;
objectStore.createIndex("title","title");
objectStore.createIndex("content","content");
objectStore.createIndex("date","date");
3.增删改查的操作
①.db -> transaction() -> 获得事务的对象
②.事物的对象 -> objectStore
③.objectStore -> 增删改查
//添加数据function addData(info) {
//获得到事务的对象 var transaction = database.transaction(["note"],"readwrite");
//存放某一种类型数据的容器(类似类) var objectStore = transaction.objectStore("note");
// 执行增删改查的操作 return objectStore.add(info);}
查询操作
get();
getAll();
function searchAll() {
return database.transaction(["note"],"readonly").objectStore("note").getAll();
}
会得到一个IDBRequest对象,可以通过监听成功事件,获得到查询到的数据
request.onsuccess = function () {
console.log("打开数据库成功");
database = this.result;
searchAll().onsuccess = function () {
console.log(this.result);
};
};
如果查询单个key对应的数据可以通过get(key)查询
database.transaction(["note"],"readonly").objectStore("note").get(1502242969880).onsuccess=function() {
console.log(this);
};
删除数据database.transaction(["note"],"readwrite").objectStore("note").delete(1502242969880).onsuccess=function() {
console.log(this);
};
更新数据
database.transaction(["note"],"readwrite").objectStore("note").put({title:"更新数据",content:"更新数据",date:1502183031380}).onsuccess=
function() {
console.log(this);
};
需要注意的事项
任何数据库的操作,更新字段、表,需要先清除原来的数据
如果是查找、删除、修改具体的内容的时候。需要根据一个唯一值查找
阅读全文
0 0
- 浅谈:HTML5中数据存储的方式:
- Html5中数据存储的方式
- 小白入门---HTML5中数据的存储方式
- html5中web存储方式:
- Html5的数据存储
- Html5 Web的5中离线存储方式之localStorage
- 浅谈C/C++中浮点数的存储方式
- alfresco中数据的存储方式
- 内存中数据的存储方式
- Android的五中数据存储方式
- Android的5中数据存储方式
- Android中数据的存储方式
- Mahout中数据的存储方式
- Matlab中数据的存储方式
- 数据存储的5中方式<一>
- Android中常用的数据存储方式
- Java中数据的存储方式
- 计算机中数据的表达/存储方式
- [多校补题]2017 Multi-University Training Contest 7 solutions BY 杭州二中
- 练习_test3
- 将博客搬至CSDN
- ucosIII+Fatfs MDK编译内存不足
- keil中使用Astyle格式化你的代码的方法2篇合
- 浅谈:HTML5中数据存储的方式:
- 互联网+AI,云反射弧如何成为人工智能发展的下一个重点
- Java toString
- Nuttx编译时报:ERROR: arm-nuttx-eabi-gcc failed: 127
- 内核源码阅读(四)进程ID
- 浏览器兼容问题的解决
- 复习_vim笔记
- CentOS7部署tomcat9+jre8+mysql5.7
- Watto and Mechanism(字符串hash算法)