WebStorage
sessionStorage：将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。Session对象可以用来保存在这段时间内所要求保存在任何数据。
localStorage：将数据保存在客户端本地的硬件设备中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。
lsessionStorage和localStorage的区别
1.localStorage 一直存储在本地，数据存储是永久的，除非用户或程序对其进行删除操作；sessionStorage在会话期内有效，数据在浏览器关闭后自动删除；
2.localStorage是基于域的，任何在该域内的页面都可以访问， sessionStorage在保存它的窗口，和由当前窗口创建的新窗口有效，直到相关联的标签页关闭
Cookie与sessionStorage和localStorage的区别
1.cookie在浏览器和服务器间来回传递， sessionStorage和localStorage不会
2.sessionStorage和localStorage的存储空间更大，有更多丰富易用的接口，各自独立的存储空间
数据存储
localStorage.setItem("key", "value);
数据获取
var val = localStorage.getItem("key");
数据删除
var val = sessionStorage.removeItem(key);数据清空
sessionStorage.clear();
离线应用程序（离线缓存）
步骤：
1、编写一个manifest类型的文件，列出需要通过浏览器缓存至本地的资源性文件。
2、开发一个Web页面，通过<html>元素的“manifest”属性将manifest文件与页面绑定。
3、对服务器端进行配置，使其能读取manifest类型的文件。
manifest
详解：manifest文件是一个简单文本文件，在该文件中以清单的形式列举了需要被缓存或不需要被缓存的资源文件的文件名称，以及这些资源文件的访问路径。你可以每一个页面单独指定一个manifest文件，也可以对整个Web应用程序指定一个总的manifest文件。
在移动Web页面应用中，当浏览器与服务器建立联系后，浏览器就会根据manifest文件所列的缓存清单，将相应的资源文件缓存在本地。
功能：需要保存哪些文件、不需要保存哪些文件、在线与离线时需要调用哪些文件
格式：
| CACHE MANIFEST | 表明版本号 |
| CACHE | 表示离线时浏览器需要缓存到本地的服务器资源文件列表。当为某个页面编写manifest类型文件时，不需要将该页面放入列表中，因为浏览器在进行本地资源缓存时会自动缓存这个页面。 |
| NETWORK | 表示在线时需要访问的资源文件列表，这些文件只有在浏览器与服务器之间建立联系时才能访问。如果设置为“*”，表示除了在“CACHE：”标记中标明需要缓存的文件之外都不进行本地缓存。 |
| FALLBACK | 表示以成对方式列出不访问文件的替补文件。其中前者是不可访问的文件，后者是替补文件，即当“/Project/Index.jsp”文件不可访问时，浏览器会尝试访问“/BkProject/Index.jsp”文件。 |
注意：
（1）在manifest文件中，第一行必须是“CACHE MANIFEST”，表明这是一个通过浏览器将服务器资源进行本地缓存的格式文件。
（2）在编写注释时需要另起一行，并且以“#”开头。
（3）manifest文件的内容允许重复编写分类标记，即可以写多个“CACHE：”标记或另外两种标记。
（4）如果没有找到分类的标记，则都被视为“CACHE：”标记下的资源文件。
（5）建议通过注释的方式标明每一个manifest类型文件的版本号，以便于更新文件时使用。例如在上面的演示代码中，“#version 0.0.0”表示内定的版本号。
<html manifest="mr.manifest">
...
</html>
Web SQL
打开/创建数据库
//openDatabase可以打开一个已经存在的数据库，如果不存在则创建
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
mydb：数据库名称
1.0：版本号
Test DB：描述文本
2*1024*1024：数据库大小，2MB创建表
function crateTable() {
var sql = 'create table if not exists t_plan(title, content, target_time,create_time)';
db.transaction(function(tx) {
tx.executeSql(sql, null, function(tx, rs) {
$("#msg").html('创建表成功');
}, errorCallback);
});
}
================
sql：执行的SQL语句
null：参数，用于动态传参
fuction(tx,rs)：成功函数
errorCallback：失败回滚增删改查
function addPlan(values) {
var sql = 'INSERT INTO t_plan (title, content, target_time, create_time) VALUES (?,?,?,?)';
db.transaction(function(tx) {
tx.executeSql(sql, values, function(tx, rs) {
var effectRow = rs.rowsAffected;
$("#msg").html('影响记录条数:' + effectRow);
}, errorCallback);
});
}
function deletePlan(values) {
var sql = 'DELETE FROM t_plan WHERE title = ?';
db.transaction(function(tx) {
tx.executeSql(sql, values, function(tx, rs) {
var effectRow = rs.rowsAffected;
$("#msg").html('影响记录条数:' + effectRow);
}, errorCallback);
});
}
function updatePlan(values) {
var sql = 'UPDATE t_plan SET content = ? WHERE title = ?';
db.transaction(function(tx) {
tx.executeSql(sql, values, function(tx, rs) {
var effectRow = rs.rowsAffected;
$("#msg").html('影响记录条数:' + effectRow);
}, errorCallback);
});
}
function getPlanList() {
var sql = 'SELECT * FROM t_plan';
db.transaction(function(tx) {
tx.executeSql(sql, null, function(tx, rs) {
$("#msg").html('list:' + rs.rows+"<br/>");
$("#msg").html('item:' + JSON.stringify(rs.rows.item(0)));
$("#msg").html('item:' + JSON.stringify(rs.rows.item(0)));
$("#msg").html('item:' + rs.rows.item(0).title);
}, errorCallback);
});
};
IndexDB
打开/创建数据库
// 打开数据库，两个参数（数据库名字，版本号），如果数据库不存在则创建一个新的库
var request = window.indexedDB.open('myDatabase', '1');
indexedDB.open()方法返回一个 IDBRequest 对象。这个对象通过三种事件error、success、upgradeneeded，处理打开数据库的操作结果。
==============error============
request.onerror = function (event) {
console.log('数据库打开报错');
};
==============success===========
var db;
request.onsuccess = function (event) {
db = request.result;
console.log('数据库打开成功');
}; //通过request对象的result属性拿到数据库对象
=============upgradeneeded======
var db;
request.onupgradeneeded = function (event) {
db = event.target.result;
}
创建表
request.onupgradeneeded = function(event) {
db = event.target.result;
var objectStore = db.createObjectStore('person', { keyPath: 'id' });
}
增删改查
var request = db.transaction(['person'], 'readwrite')
.objectStore('person')
.add({ id: 1, name: '张三', age: 24, email: '[email protected]' });
=================
var request = db.transaction(['person'], 'readwrite')
.objectStore('person')
.delete(1);
=================
var request = db.transaction(['person'], 'readwrite')
.objectStore('person')
.put({ id: 1, name: '李四', age: 35, email: '[email protected]' });
================
var transaction = db.transaction(['person']);
var objectStore = transaction.objectStore('person');
var request = objectStore.get(1);
request.onsuccess = function( event) {
if (request.result) {
console.log('Name: ' + request.result.name);
}
}
=======遍历========
var objectStore = db.transaction('person').objectStore('person');
objectStore.openCursor().onsuccess = function (event) {
var cursor = event.target.result;
if (cursor) {
console.log('Name: ' + cursor.value.name);
}
}
