专栏首页木子墨的前端日常浏览器相关--H5本地存储

浏览器相关--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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 懒就是生产力之图片懒加载

    最近负责的项目渐渐的由业务型转向营销型,营销内容越来越多,图片也就多了起来。图片一多起来问题就来了,一上来几十张图片加载起来半天都过去了,咋办?凉拌--懒加载

    木子墨
  • easyUI datagrid 清空

    最近在做一个管理系统,出于一些需要,经常要将一些datagrid清空。然后easyUI本身并没有自带的方法,然后自己动手丰衣足食吧。

    木子墨
  • nginx反向代理跨域基本配置与常见误区

    最近公司前后端分离,前端独立提供页面和静态服务很自然的就想到了用nginx去做静态服务器。同时由于跨域了,就想利用nginx的反向代理去处理一下跨域,但是在解决...

    木子墨
  • JavaScript语言精粹【语法、对象、函数】

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛
  • 前端开发面试题答案(三)

    ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的数据类型 )

    疯狂的技术宅
  • 自然语言处理(NLP)入门指南

    大数据文摘
  • 【超全资源】自然语言处理(NLP)入门学习资源清单(部分资料下载)

    Melanie Tosik目前就职于旅游搜索公司WayBlazer,她的工作内容是通过自然语言请求来生产个性化旅游推荐路线。回顾她的学习历程,她为期望入门自然语...

    新智元
  • 【独家】自然语言处理(NLP)入门指南

    致谢 钟崇光博士参与了数据派THU于6月5日、THU数据派于6月8日发布的《循序渐进提升Kaggle竞赛模型精确度,以美国好事达保险公司理赔为例》一文的校对工作...

    数据派THU
  • 纽约大学《机器学习入门》课程讲义(附PDF下载)

    允中 编译整理 量子位 出品 | 公众号 QbitAI 今年春天,Kyunghyun Cho开始在纽约大学教授本科生《机器学习入门》课程。今天,他把这门课程的讲...

    量子位
  • Phalcon入门教程之控制器

    Marser

扫码关注云+社区

领取腾讯云代金券