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选项卡下可以查看。