HTML5 混合APP开发学习笔记（十二）——本地存储

本地存储

本地存储技术由来已久，使用它一是可以减少向服务器的请求次数，从而减少用户等待从服务端获取数据的时间；二是网络状态不佳时仍可以显示离线数据。

LocalStorage

简介：localStorage类似于Cookie，用于持久化本地存储，但它没有时间限制，除非主动删除和清空内容，否则数据永不过期。另外它的存储能力也远大于Cookie，可以存储多达5MB的数据。
语法：

1. 保存数据：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);
}

¹

2. 读取数据：getItem(“key”) 等三种方式

//第一种方法读取
var a=storage.a;
//第二种方法读取
var b=storage["b"];
//第三种方法读取
var c=storage.getItem("c");

3. 删除数据：removeItem(“key”)
4. 清除所有：clear()
5. 检索数据：key(n)，检索第n个键的值
6. 检查浏览器是否支持：window.localStorage

SessionStorage

简介：sessionStorage类似于Session，用于本地存储一个会话（session）中的数据。这些数据只有在同一个会话中的页面才能访问，当会话结束后（关掉网站所有浏览的页面或浏览器），数据随之也会丢失。因此sessionStorage是一种不可持久化的本地存储。
语法：与 LocalStorage 相同

Web SQL数据库

简介：HTML5引入Web SQL数据库概念，它使用SQL来操纵客户端数据库的API，这些API是异步的，规范中使用的是SQLlite。SQLite是一款轻型的数据库，是遵循ACID（原子性、一致性、隔离性、持久性）的关系型数据库管理系统。它的设计目标是嵌入式的，它占用资源非常低，只需要几百K字节的内存就可以了，另外它的处理速度很快。
语法：

1. 检测是否支持：if(window.openDatabase){…}
2. 创建或打开数据库：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);
3. 执行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（增查改删）操作，并支持事务，所有操作都是异步的，储存空间也比较大。

1. 检测是否支持：if(window.indexedDB) {…}
2. 数据库初始化：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;};
}

3. 对象存储空间: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"});
      }
};

4. 索引：需要使用其他属性（非主键）获取数据时，就要预先创建索引，然后使用索引获取数据
   store.createIndex(name,keyPath,optionalParameters)
   name是索引名字符串
   keyPath是要创建索引的对象属性字符串
   optioanlParameters是设置索引是否唯一的JSON对象，一般都设置为｛unique:true}
5. 事务：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(){…};

6. 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);

---

1. https://www.runoob.com/jsref/prop-win-localstorage.html ↩︎