HTML5的本地存储功能
本文介绍的本地存储有：Web Storage、Web SQL 数据库、IndexedDB。
Web Storage
Web Storage是HTML5引入的一个非常重要的功能，可以在客户端本地存储数据，类似HTML4的cookie，但可实现功能要比cookie强大的多，cookie大小被限制在4KB，Web Storage官方建议为每个网站5MB。
Web Storage又分为两种：
sessionStorage 将数据保存在session中，浏览器关闭也就没了；
localStorage 一直将数据保存在客户端本地；html5的localStorage作为HTML5本地存储web storage特性的API之一，html5的localStorage用于存储一些临时的离线数据，将数据保存在客户端中，和file、database一样，存储具有永久性质。
【localstorage文件夹在哪儿？可参见附录】
不管是sessionStorage，还是localStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
其中，key和value都必须为字符串，换言之，web Storage的API只能操作字符串。
处于安全考虑，涉及到金钱或者其他比较重要的信息，还是要存在后台比较好。
【注
localStorage存储方法，下面三种方式效果一样：
localStorage.name ='vanida；
localStorage["name"]='vanida'；
localStorage.setItem("name","vanida");
localStorage获取值方法，下面三种方式效果一样：
var name = localStorage["name"]
var name= localStorage.name
var name＝ localStorage.getItem("name");
localStorage清除特定值方法，下面两种方式效果一样：
localStorage.removeItem("name");
localStorage.name＝'';
localStorage清除所有值方法：
localStorage.clear()
】
检测浏览器是否本地存储 localstorage的代码：
if(window.localStorage){
alert('此浏览器支持本地存储');
}else{
alert('T此浏览器不支持本地存储');
}
下面，给出一个简单例子：简单的通讯录小程序，要实现如下功能：
录入联系人，每条联系人记录有姓名、手机号码2个字段，以手机号作为key存入localStorage；
根据手机号码，查找机主或删除之；
列出当前已保存的所有联系人信息；
代码如下：
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>HTML5本地存储之WebStorage例子</title>
<script>
//调用函数
//loadAll();
//保存数据
function save(){
var user_name = document.getElementById("user_name").value;
var mobilephone = document.getElementById("mobilephone").value;
localStorage.setItem(mobilephone,user_name);
loadAll();
}
//将所有存储在localStorage中的对象提取出来，并展现到界面上
function loadAll(){
var list = document.getElementById("list");
if(localStorage.length>0){
var result = "<table border='1'>";
result += "<tr><td>姓名</td><td>手机号码</td></tr>";
for(var i=0;i<localStorage.length;i++){
var mobilephone = localStorage.key(i);
var name = localStorage.getItem(mobilephone);
result += "<tr><td>"+name+"</td><td>"+mobilephone+"</td></tr>";
}
result += "</table>";
list.innerHTML = result;
}else{
list.innerHTML = "目前数据为空，赶紧开始加入联系人吧";
}
}
//查找数据
function find(){
var search_phone = document.getElementById("search_phone").value;
var name = localStorage.getItem(search_phone);
var find_result = document.getElementById("find_result");
find_result.innerHTML = search_phone + "的机主是：" + name;
}
//删除数据
function del(){
//window.localStorage.clear(); //删除全部数据
var search_phone = document.getElementById("search_phone").value;
localStorage.removeItem(search_phone);// 查找键值对删除
loadAll();
}
</script>
</head>
<body onload="loadAll()">
<h3><center>简单的通讯录<center></h3>
<hr color="#666666">
<div style="border: 2px dashed #ccc;width:320px;text-align:center;">
<label for="user_name">姓名：</label>
<input type="text" id="user_name" name="user_name" class="text"/>
<br/>
<label for="mobilephone">手机：</label>
<input type="text" id="mobilephone" name="mobilephone"/>
<br/>
<input type="button" onclick="save()" value="新增记录"/>
<hr/>
<label for="search_phone">输入手机号：</label>
<input type="text" id="search_phone" name="search_phone"/>
<input type="button" onclick="find()" value="查找机主"/>
<input type="button" onclick="del()" value="删除记录"/>
<p id="find_result"><br/></p>
</div>
<br/>
<div id="list">
</div>
<br/>
<dividdivid="list">
</div>
</body>
</html>保存文件名为WebStorageA.html，放在文件夹（目录）中（我这儿是D:\网页练习，你可以根据你的实际情况而定 ），用浏览器打开iframeDemo.html，显示效果如下：
已新增了两条联系人记录。
Web SQL 数据库
Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。用类似于mysql查询一样的查询语句来操作本地数据库。
判断浏览器是否支持该项功能
if (window.openDatabase) {
alert('当前浏览器支持 webSQL !');
} else {
alert('当前浏览器不支持 webSQL !!!');
}
核心方法：
①openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
// openDatabase() 方法对应的五个参数，分别为：数据库名称、版本号、描述文本、数据库大小、创建回调，如：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024,fn);
openDatabase方法打开一个已经存在的数据库，如果数据库不存在，它还可以创建数据库。几个参数意义分别是：
1，数据库名称。
2，数据库的版本号，目前来说传个1.0就可以了，当然可以不填；
3，对数据库的描述。
4，设置分配的数据库的大小（单位是kb）。
5，回调函数(可省略)。初次调用时创建数据库，以后就是建立连接了。
②transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
// 开启事务
database.transaction(function (sql) {
// 在这里操作数据库的增删该查
});
transaction方法可以设置一个回调函数，此函数可以接受一个参数就是我们开启的事务的对象。然后通过此对象可以进行执行Sql脚本，跟下面的步骤可以结合起来。
③executeSql：这个方法用于执行实际的 SQL 查询。
ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)
参数说明：
qlQuery：需要具体执行的sql语句，可以是create、select、update、delete；
value1,value2..]：sql语句中所有使用到的参数的数组，在executeSql方法中，将s>语句中所要使用的参数先用“?”代替，然后依次将这些参数组成数组放在第二个参数中
ataHandler：执行成功是调用的回调函数，通过该函数可以获得查询结果集；
errorHandler：执行失败时调用的回调函数；
下面给出一个演示(运行于浏览器 console)，代码如下：
// 打开|创建DB
var db = openDatabase('corp', '1.0', 'corporation info', 2 * 1024);
// 创建数据表
db.transaction(function (tx) {
tx.executeSql('create table if not exists corporation (id unique, name)');
});
// 新增数据行
db.transaction(function (tx) {
tx.executeSql('insert into corporation (id, name) values (1, "Baidu")');
tx.executeSql('insert into corporation (id, name) values (?, ?)', [2, 'Alibaba']);
tx.executeSql('insert into corporation (id, name) values (3, "Tencent")');
});
// 查询
db.transaction(function(tx) {
/*tx.executeSql(SQL语句, SQL参数列表, func, null);*/
tx.executeSql('select * from corporation', [], function(tx, results) {
var len = results.rows.length;
console.log('记录条数：', len);
for (var i = 0; i < len; i++) {
var record = results.rows.item(i);
console.log(record.id, record.name);
}
}, null);
});
// 删除
db.transaction(function(tx) {
/*tx.executeSql('delete from corporation where id = ?', [id]);*/
tx.executeSql('delete from corporation where id = 1');
});
// 更新
db.transaction(function(tx) {
tx.executeSql('update corporation set name = ? where id = ?', ['Ali', 2])
});
打开浏览器（在此用edge浏览器），按F12运行于控制台（console），参见下图：
IndexedDB
索引数据库 (IndexedDB) ，受到W3C的推崇，作为 HTML5 的一部分，对创建具有丰富本地存储数据的数据密集型的离线 HTML5 Web 应用程序很有用。同时它还有助于本地缓存数据，使传统在线 Web 应用程序（比如移动 Web 应用程序）能够更快地运行和响应。
indexedDB是一种轻量级NOSQL数据库，是由浏览器自带。相比Web Sql更加高效，包括索引、事务处理和查询功能。在HTML5本地存储中，IndexedDB存储的数据是最多的。
IndexedDB整体的结构：
其中， DB是数据库， Object Store是数据表，tem则等于表中的一条记录。
使用 IndexedDB参见 https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDB
下面给出一个indexedDB数据库示例代码
<!DOCTYPE html>
<html>
<head>
<script>
window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB ||
window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction ||
window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange|| window.webkitIDBKeyRange ||
window.msIDBKeyRange;
window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor;
const dbName = 'indexedDBTest'; //数据库名
const dbVersion = 20180408; //版本号
let idb;
function window_onload(){
document.getElementById("btnSaveData").disabled=true;
document.getElementById("btnSearchData").disabled=true;
}
function ConnectDataBase(){
/*连接数据库，dbConnect对象为一个IDBOpenDBRequest对象，代表数据库连接
的请求对象*/
let dbConnect = indexedDB.open(dbName, dbVersion);
dbConnect.onsuccess = function(e){//连接成功
idb = e.target.result; //引用IDBDatabase对象
alert('数据库连接成功');
document.getElementById("btnSaveData").disabled=false;
};
dbConnect.onerror = function(){
alert('数据库连接失败');
};
dbConnect.onupgradeneeded = function(e){
//数据库版本更新
//e.target.result为一个IDBDatabase对象，代表连接成功的数据库对象
idb = e.target.result;
/*e.target.transaction属性值为一个IDBTransaction事务对象，此处代表
版本更新事务*/
let tx = e.target.transaction;
let name = 'Users2';
let optionalParameters = {
keyPath: 'userId',
autoIncrement: false
};
let store = idb.createObjectStore(name, optionalParameters);
alert('对象仓库创建成功');
name = 'userNameIndex';
keyPath = 'userName';
optionalParameters = {
unique: false,
multiEntry: false
};
let idx = store.createIndex(name, keyPath, optionalParameters);
alert('索引创建成功');
};
}
function SaveData(){
//开启事务
let tx = idb.transaction(['Users2'],'readwrite');
tx.oncomplete = function(){
alert('保存数据成功');
document.getElementById("btnSearchData").disabled=false;
}
tx.onabort = function(){alert('保存数据失败'); }
let store = tx.objectStore('Users2');
let value = {
userId: 1,
userName: '用户D',
address: '住址1'
};
store.put(value);
value = {
userId:3,
userName: '用户C',
address: '住址2'
};
store.put(value);
value = {
userId: 5,
userName: '用户B',
address: '住址3'
};
store.put(value);
value = {
userId: 7,
userName: '用户A',
address: '住址4'
};
store.put(value);
}
function SearchData(){
//开启事务
let range = IDBKeyRange.lowerBound('用户A');
let tx = idb.transaction(['Users2'],'readonly');
let store = tx.objectStore('Users2');
let req = store.getKey(IDBKeyRange.bound(2,10));
req.onsuccess = function(){
alert('检索到一条数据，数据主键值为'+this.result);
}
req.onerror = function(){
alert('检索数据失败');
}
}
</script>
</head>
<body onload="window_onload()">
<input id="btnConnectDataBase" type="button" value="连接数据库"
onclick="ConnectDataBase();"/>
<input id="btnSaveData" type="button" value="保存数据" onclick="SaveData();"/>
<input id="btnSearchData" type="button" value="检索数据" onclick="SearchData();"/>
</body>
</html>打开浏览器（在此用edge浏览器），按F12运行于控制台（console），参见下图：
附录、localstorage文件夹在哪儿？
对于谷歌浏览器，启动Chrome浏览器,在Chrome浏览器的地址栏输入Chrome:Version
对于微软edge浏览器，启动edge浏览器,在Chrome浏览器的地址栏输入edge:Version
如果要在浏览器查看，打开调试工具(F12)，在application选项卡下可以查看。