html5中LocalStorage、SessionStorage、WebSQL、COOKIEs、IndexedDB、SQLite对比及代码
在html5发布之前，html中常用的存储方式是COOKIE，但是COOKIE由于存储大小的限制，一般不超过4kb，所以对于html的发展有制约，因此在html5中新增了LocalStorage、SessionStorage、WebSQL、IndexedDB、SQLite五种离线客户端存储技术，今天我们一个一个分析介绍一下用法及示例代码。
(一) LocalStorage
LocalStorage 存储的数据保存在浏览器中。存储容量很小，大概不会超过5M（不同的浏览器有差别），它是以键值对形式保存数据的，没有关联查询、条件查询的机制。
<html>
<head>
<title>localStorage</title>
</head>
<body>
<script>
const Storage = {};
Storage.get = function(name) {
return localStorage.getItem(name);
}
Storage.set = function(name, val) {
localStorage.setItem(name, val);
}
Storage.del = function(name) {
localStorage.removeItem(name);
}
Storage.set("status", "OK");
Storage.set("quit", "...");
//Storage.del("status");
</script>
</body>
</html>
(二) SessionStorage
SessionStorage 跟 LocalStorage 很相似，大小不超过5M，区别是每次关闭会话，其中的内容会被清空。在窗口中打开页面会复制顶级浏览会话的上下文作为新会话的上下文。相同 url 的不同 tabs 页面，其中的值是不同的。有过期时间设置，想持久化存储数据，它是做不到的。
<html>
<head>
<title>sessionStorage</title>
</head>
<body>
<script>
const Storage = {};
Storage.get = function(name) {
return sessionStorage.getItem(name);
}
Storage.set = function(name, val) {
sessionStorage.setItem(name, val);
}
Storage.del = function(name) {
sessionStorage.removeItem(name);
}
Storage.set("status", "OK");
Storage.set("quit", "...");
//Storage.del("status");
</script>
</body>
</html>
(三) WebSQL
Web SQL 数据库API 并不是 HTML5 规范的一部分，但是它是一个独立的规范。WebSQL 是在浏览器上模拟数据库，使用 js 来操作 SQL 完成对数据的读写，websql的底层实现还是sqlite数据库。他的大小默认是50M，当超过时浏览器会弹出是否允许扩容提示，每次可扩容5M。
websql封装代码如下：
<script type="text/javascript">
/**
*数据库操作辅助类,定义对象、数据操作方法都在这里定义
*/
var dbname='dbname';/*数据库名*/
var dbdesc = '测试数据库'; /*数据库描述*/
var dbsize = 20*1024*1024; /*数据库大小*/
var dataBase = null; /*暂存数据库对象*/
/*数据库中的表单名*/
var websqlTable = "websqlTable";
/**
* 打开数据库
* @returns dataBase:打开成功 null:打开失败
*/
function websqlOpenDB(){
/*数据库有就打开 没有就创建*/
var version = window.localStorage.DBversion;
dataBase = window.openDatabase(dbname, version, dbdesc, dbsize);
if (dataBase) {
console.log("数据库创建/打开成功!");
} else{
console.log("数据库创建/打开失败！");
}
return dataBase;
}
//修改数据库版本
function changeDataBaseVersion(old_version,new_version){
var db = websqlOpenDB();
db.changeVersion(old_version,new_version,null,function(err){},null)
window.localStorage.DBversion = new_version;
}
/**
* 新建数据库里面的表单
* @param tableName:表单名
*/
function websqlCreatTable(tableName){
// chinaAreaOpenDB();
var creatTableSQL = 'CREATE TABLE IF NOT EXISTS '+ tableName+'(ID text,QUESTION text)';
dataBase.transaction(function (ctx,result) {
ctx.executeSql(creatTableSQL,[],function(ctx,result){
console.log("表创建成功 " + tableName);
},function(tx, error){
console.log('创建表失败:' + tableName + error.message);
});
});
}
//插入数据
function websqlInsterDataToTable(tableName,id,question){
var question = JSON.stringify(question);
var insterTableSQL = 'INSERT INTO ' + tableName + ' VALUES (?,?)';
dataBase.transaction(function (ctx) {
ctx.executeSql(insterTableSQL,[id,question],function (ctx,result){
console.log("插入" + tableName + id + "成功");
},
function (tx, error) {
console.log('插入失败: ' + error.message);
});
});
}
/**
* 获取数据库一个表单里面的所有数据
* @param tableName:表单名
* 返回数据集合
*/
function websqlGetAllData(tableName,fn){
var selectALLSQL = 'SELECT * FROM ' + tableName;
dataBase.transaction(function (ctx) {
ctx.executeSql(selectALLSQL,[],function (ctx,result){
console.log('查询成功: ' + tableName +'__'+ result.rows.length);
var len = result.rows.length;
var queryDataArray = [];
for(var i = 0;i < len;i++) {
queryDataArray.push(JSON.parse(result.rows.item(i).QUESTION));
}
fn(queryDataArray);
},
function (tx, error) {
console.log('查询失败: ' + error.message);
});
});
}
//查询所有数据，获取json格式
function ...点击查看剩余70%
{{collectdata}}
网友评论0