首页 > 代码库 > 浏览器相关--H5本地存储
浏览器相关--H5本地存储
这一系列主要研究一下浏览器底层的一些东西，包括协议、存储、底层变量、部分API等。
今天首先介绍一下浏览器底层存储技术。
浏览器存储主要包括一下几个部分
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()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); // 新建表testdatabase.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 USERDATAtry { 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 GLOBALSTORAGEvar 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
浏览器相关--H5本地存储