本地存储
本地存储技术由来已久,使用它一是可以减少向服务器的请求次数,从而减少用户等待从服务端获取数据的时间;二是网络状态不佳时仍可以显示离线数据。
LocalStorage
简介:localStorage类似于Cookie,用于持久化本地存储,但它没有时间限制,除非主动删除和清空内容,否则数据永不过期。另外它的存储能力也远大于Cookie,可以存储多达5MB的数据。
语法:
- 保存数据:setItem(key, value) 等三种方式
if(!window.localStorage){
alert("浏览器不支持localstorage");
return false;
}else{
var storage=window.localStorage;
//写入a字段
storage["a"]=1;
//写入b字段
storage.b=1;
//写入c字段
storage.setItem("c",3);
}
- 读取数据:getItem(“key”) 等三种方式
//第一种方法读取
var a=storage.a;
//第二种方法读取
var b=storage["b"];
//第三种方法读取
var c=storage.getItem("c");
- 删除数据:removeItem(“key”)
- 清除所有:clear()
- 检索数据:key(n),检索第n个键的值
- 检查浏览器是否支持:window.localStorage
SessionStorage
简介:sessionStorage类似于Session,用于本地存储一个会话(session)中的数据。这些数据只有在同一个会话中的页面才能访问,当会话结束后(关掉网站所有浏览的页面或浏览器),数据随之也会丢失。因此sessionStorage是一种不可持久化的本地存储。
语法:与 LocalStorage 相同
Web SQL数据库
简介:HTML5引入Web SQL数据库概念,它使用SQL来操纵客户端数据库的API,这些API是异步的,规范中使用的是SQLlite。SQLite是一款轻型的数据库,是遵循ACID(原子性、一致性、隔离性、持久性)的关系型数据库管理系统。它的设计目标是嵌入式的,它占用资源非常低,只需要几百K字节的内存就可以了,另外它的处理速度很快。
语法:
- 检测是否支持:if(window.openDatabase){…}
- 创建或打开数据库:var db=window.openDatabase(name,version,displayName,estimatedSize,creationCallback)
name是数据库名称字符串
version是数据库版本号字符串
displayName是数据库显示名称字符串
esitimatedSize是数据库保存数据的大小,(以字节为单位)
creationCallback是创建或连接数据库成功后的回调函数。执行后可以通过db对象检测创建或连接数据库是否成功。
例:var db = openDatabase(‘mydb’, ‘1.0’, ‘Test DB’, 2 * 1024 * 1024); - 执行SQL语句: database.transaction()
db.transaction(function(tx){
tx.executeSql(
sqlString,
paramArray,
successCallback,
failedCallback);
});
- sqlString:需要执行的SQL语句字符串
- paramArray:需要传递的参数数组,没有参数时用 ‘[]’ 代替
- successCallback:成功的回调函数,一般用于查询结果集
- failedCallback:出现错误的回调函数
完整实例:
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (tx) {
//创建LOGS表,表头为id、log
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
//在LOGS表中插入数据
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
msg = '<p>数据表已创建,且插入了两条数据。</p>';
document.querySelector('#status').innerHTML = msg;
});
db.transaction(function (tx) {
//查询信息
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
//数据库记录的数量
var len = results.rows.length;
msg = "<p>查询记录条数: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
//显示每条数据的log信息
for (i = 0; i < len; i++){
msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
document.querySelector('#status').innerHTML += msg;
}
}, null);
});
IndexedDB数据库
简介:IndexedDB是一种轻量级NoSQL(Not Only SQL)数据库,NoSQL数据库是非关系性的数据库,它不需要使用SQL语句去操作数据库,数据的形式采用JSON格式,提供了常规的CRUD(增查改删)操作,并支持事务,所有操作都是异步的,储存空间也比较大。
- 检测是否支持:if(window.indexedDB) {…}
- 数据库初始化:var req=indexedDB.open(name,version)
name是数据库名称字符串
version是数据库版本号字符串如果指定的数据库存在,则打开,否则创建数据库。
每一次IndexedDB数据库操作,都需要定义操作在成功或失败的回调函数:
if(window.indexedDB) {
var req = indexedDB.open(name, version);
var db;
req.onsuccess = function(event) {
db = event.target.result;};
req.onerror = function(error) {
console.log(err.target.errorCode);};
req.onupgradeneeded = function(event) {
db = event.target.result;};
}
- 对象存储空间:var store = db.createObjectStore(name,optionalParameters)
name是对象存储空间名字符串
optionalParameters参数可选,代表对象存储空间中键值的选项,是个JSON对象配置。
我们可以使用每条记录中的某个指定字段作为键值(keyPath),也可以使用自动生成的递增数字作为键(keyGenerator),也可以不指定。
req.onupgradeneeded = function(event) {
db=event.target.result;
//判断对象存储空间是否存在,没有就创建
if(!db.objectStoreNames.contains("test")){
//创建对象存储空间,键值是属性No
db.createObjectStore("test",{keyPath:"No"});
}
};
- 索引:需要使用其他属性(非主键)获取数据时,就要预先创建索引,然后使用索引获取数据
store.createIndex(name,keyPath,optionalParameters)
name是索引名字符串
keyPath是要创建索引的对象属性字符串
optioanlParameters是设置索引是否唯一的JSON对象,一般都设置为{unique:true} - 事务:IndexedDB数据库中常用的对数据库的操作(例如插入、删除、更改数据)都需要在事务里完成
创建事物的语法:var trans=db.transaction(storeName,mode)
storeName是要操作对象存储空间名字符串
mode事物模式字符串:“readonly”和“readwrite”两种,默认为只读
var trans=db.transaction("test","readwrite");
trans.onerror=function(){…};
trans.onabort=function(){…};
trans.oncomplete=function(){…};
- CRUD操作:cread、retrieve、update、delete 增删查改操作
//获取相应的对象存储空间
var store = db.transaction("test", "readwrite").objectStore("test");
//增加数据,data是JSON对象
store.add(data);
//读取数据,keyPath是键值
store.get(keyPath).onsuccess=function(){
//更新数据,data是新的JSON对象
store.put(newdata);};
//删除数据,keyPath是键值
store.delete(keyPath);