浏览器相关--H5本地存储
因为项目需要，最近研究了一下HTML5本地存储相关的东西，在这简单的记录一下。
浏览器存储主要包括一下几个部分 1. cookie 2. localStorage 3. sessionStorage 4. indexDB 5. websql 6. window变量 7. flash cookie
下面具体说一下，虽然也没特别具体。。。
1、cookie 这个存储用了很久了，而且也是以前大多网站十分喜欢的存储站点。但是也很容易被清除。同时cookie会在每一次通信过程中传向服务端。用法十分亲民，
document.cookie = a + '=' + b + ';expires=' + new Date().toGMTString()同时cookie有一个很好的地方就是，它本身有一个过期时间属性，可以用来标注一个变量的有效期。而cookie一旦过期就会被自动删除掉。
2、localStorage、sessionStorage 这两个就很好说啦，大家使用频率很高的。 - localStorage: 持久存储，只要用户不主动删除就会一直存在。 - sessionStorage：面向session的浏览器存储，因此只存在于一个页面的生命周期内，关闭即清除 两者均采用键值对的形式存储数据，使用方式如下
localStorage.setItem(name, value);
localStorage.getItem(name);
localStorage.name;
sessionStorage.setItem(name, value);
sessionStorage.getItem(name);
sessionStorage.name;3、indexedDB 内嵌在浏览器端的非关系型数据库，数据以键值对的形式存储，兼容性良好。 indexDB直接操作的存储对象是ObjectStore，这有点类似其他数据库中table概念。 基础语法
/*
* 获取indexDB对象
*/
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
/*
* 创建数据库，存在则打开，不存在则创建
*
* name: 数据库名
* ver: 版本号
*/
var request = indexedDB.open(name, ver);
/*
* indexDB的三个回调函数
* 1、错误回调
* 2、版本升级/数据库第一次创建调用函数
* 3、数据库创建成功回调
* ojName：ObjectStore，存储空间名
*/
request.onerror = function(e) {};
request.onupgradeneeded = function(event) {
var db = event.target.result;
var store = db.createObjectStore(ojName, {
keyPath: "name",
unique: false
})
};
request.onsuccess = function(event) {
var idb = event.target.result; // 获得数据库实例
var tx = idb.transaction(ojName, "readwrite"); // 创建事务
var objst = tx.objectStore(ojName);
var qr = objst.add({
"name": name,
"value": value
})
};
// 关闭数据库
idb.close()
// 其他语法
/*
* 其他语法
* 1、增
* 2、删
* 3、改
* 4、查
*/
objst.add({
key: 'key',
value: 'value'
})
objst.delete(key)
objst.put({
key: 'key',
value: 'value'
})
var qr = objst.get(name);
var indexdbCode = '';
qr.onsuccess = function(event) {
if (qr.result === undefined) {
indexdbCode = '';
console.log('==='+indexdbCode);
} else {
indexdbCode = qr.result.value;
console.log('>>>'+indexdbCode);
}
};具体使用
下面是一个简单的添加数据的例子
function storeIndexDB(name, value) {
try {
if (!('indexedDB' in window)) {
indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
}
if (indexedDB) {
var ver = 1;
var request = indexedDB.open("db_test", ver); // 打开或穿件数据库，ver为版本号
request.onerror = function(e) {;
}
request.onupgradeneeded = function(event) {
var db = event.target.result;
var store = db.createObjectStore("friends", {
keyPath: "name",
unique: false
})
}
if (value !== undefined) {
request.onsuccess = function(event) {
var idb = event.target.result;
if (idb.objectStoreNames.contains("friends")) {
var tx = idb.transaction(["friends"], "readwrite");
var objst = tx.objectStore("friends");
var qr = objst.add({
"name": name,
"value": value
})
}
idb.close();
}
}
}
} catch (e) {}
}4、websql
内嵌在浏览器的关系型数据库，是的前端可以像在使用mysql、Oracle一样的写sql语句，并存储信息。兼容性良好。存储后可在浏览器resource中查看。 基础语法
/*
* 创建数据库，存在则打开，不存在则创建
*
* name: 数据库名
* version: 版本号
* desc：描述
* size：大小
*/
var database = window.openDatabase(name, version, desc, size);
/*
*执行sql语句
*
* sql: 就是要执行的sql语句，用过mysql或者oracle的一定会非常熟悉
* params：sql中需要匹配的参数，本身是一个数组，参数中间用英文逗号间隔
* callBackFunSuccess：sql执行成功回调函数
* callBackFunErr：sql执行失败回调函数
*/
database.transaction(function(tx) {
tx.executeSql(sql,params,callBackFunSuccess,callBackFunErr);
}); 具体使用
// 创建数据库
var database = window.openDatabase("sqlite_test", "", "test", 1024 * 1024);
// 新建表test
database.transaction(function(tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS test(" +
"id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, " +
"name TEXT NOT NULL, " +
"value TEXT NOT NULL, " +
"UNIQUE (name)" +
")", [],
function(tx, rs) {},
function(tx, err) {});
});
// 向test添加数据
database.transaction(function(tx) {
tx.executeSql("INSERT OR REPLACE INTO test(name, value) " +
"VALUES(?, ?)", [name, value],
function(tx, rs) {},
function(tx, err) {});
});
// 从test查询数据
database.transaction(function(tx) {
tx.executeSql("SELECT value FROM test WHERE name=?", ['tom'],function(tx, result1) {
if (result1.rows.length >= 1) {
console.log(result1.rows.item(0).value);
} else {
console.log(sqlCode);
}
},
function(tx, err) {});
});
// 更新数据
db.transaction(function(tx) {
tx.executeSql("update test set mytitle=? where mytitle = 'fsafdsaf'",['xp'],null,null);
});
// 删除test中全部数据
db.transaction(function(tx) {
tx.executeSql("delete from test",[],null,null);
});
// 删除某个数据
db.transaction(function(tx) {
tx.executeSql("delete from test where id = ?",['10010'],null,null);
});
// 删除表
db.transaction(function(tx) {
tx.executeSql("DROP TABLE test");
}); 5、window变量
这是一个比较猥琐的地方，生命周期有限，一般大家也不会去使用。但是对于全局变量的临时存储来说，还是一个不可多得的好地方。
6、flash cookie flash cookie现在用的地方比较多，在这里先不细说，后面单开一个好好理一理。
除了上述的浏览器存储外，还有一些其他的。比如IE使用的userData，globalStorage等等。写个例子，不多说了，你懂得。
// IE USERDATA
try {
var elm = this.createElem("div", "userdata_el", 1);
if (elm.addBehavior) {
elm.style.behavior = "url(#default#userData)";
if (value !== undefined) {
elm.setAttribute(name, value);
elm.save(name);
} else {
elm.load(name);
return elm.getAttribute(name);
}
}
} catch (e) {}
// IE GLOBALSTORAGE
var globalStorage = window.globalStorage
if (globalStorage) {
var host = this.getHost();
try {
if (value !== undefined) {
globalStorage[host][name] = value;
} else {
return globalStorage[host][name];
}
} catch (e) { }
}上面呢，主要就是现在浏览器中比较常用的存储技术，说的不是特别详细，只是介绍了一下简单的使用，想细研究的可以再去看看官方资料和大神们的博客。
大神们的博客，推荐大家看一下，说的很详尽， 1、html5 web IndexedDB使用详解： http://blog.csdn.net/rdj_miss/article/details/51285097 2、HTML5本地存储——IndexedDB：http://www.cnblogs.com/dolphinX/p/3415761.html 3、HBuilder webApp开发 Websql增删改查操作：http://blog.csdn.net/zhuming3834/article/details/51471434