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

  • 相关阅读:
    预编译对象四部区
    闭包
    使用charCodeAt计算字节数
    对象增删改查
    nacos
    Maven不能不关注啦
    jvm造轮子
    ubuntu 20.0 安装 mongodb
    ubuntu 安装 mongodb
    腾讯云服务器如何使用root账号登录,不能使用root登录怎么办
  • 原文地址:https://www.cnblogs.com/heioray/p/7265372.html
Copyright © 2020-2023  润新知