首页 > 行业动态 > 正文

Web存储机制—sessionStorage,localStorage使用方法
2017-06-27 09:48:16   来源:爱创课堂   评论:0 点击:

Web存储机制,在这里主要说有关于Web Storage API提供的存储机制,通过该机制,浏览器可以安全地存储键值对,比使用cookie更加直观。接下来简单的了解如何使用这方面的技术。

基本概念

Web Storage 包含两种机制:

  • sessionStorage为每一个给定的源维持一个独立的存储区域,该区域在页面会话期间可用(即只要浏览器处于打开状态,包括页面重新加载和恢复)
  • localStorage同样的功能,但是在浏览器关闭,然后重新打开后数据仍然存在

这两种机制是通过Window.sessionStorageWindow.localStorage属性使用。更确切的说,在支持的浏览器中Window对象实现了WindowLocalStorageWindowSessionStorage对象并挂在其localStoragesessionStorage属性下。调用其中任一对象会创建Storage对象,通过Storage对象,可以设置、获取和移除数据项。对于每个源sessionStoragelocalStorage使用不同的Storage对象。

例如,在文档中调用localStorage将会返回一个Storage对象,调用sessionStorage返回一个不同的Storage对象。可以使用相同的方式操作这些对象,但是操作是独立的。

在了解如何使用localStoragesessionStorage之前,先来一下Storage对象。

Storage对象

Storage对象作为Web Storage API的接口,Storage提供了访问特定域名下的会话存储或本地存储的功能。例如,可以添加、修改或删除存储的数据项。

如果想操作一个域名的会话存储,可以使用Window.sessionStorage;如果想要操作一个域名的本地存储,可以使用Window.localStorage

Storage对象的属性和方法

Storage对象提供自己的属性和方法:

  • Storage.length:返回一个整数,表示存储在Storage对象中的数据项数量。这个是Storage对象的一个属性,而且是一个只读属性。
  • Storage.key():该方法接受一个数值n作为参数,并返回存储中的第n个键名
  • Storage.getItem():该方法接受一个键名作为参数,返回键名对应的值
  • Storage.setItem():该方法接受一个键名和值作为参数,将会把键值对添加到存储中,如果键名存在,则更新其对应的值
  • Storage.removeItem():该方法接受一个键名作为参数,并把该键名从存储中删除
  • Storage.clear():调用该方法会清空存储中的所有键名

简单的示例

写一个简单的示例,页面就三个按钮:SetGetRemove。按钮点击时,分别绑定三个函数:setStorage()getStorage()removeStorage()

  • setStorage():做了localStoragesessionStorage存储,同时存的键名为name,键值为W3cplus.com
  • getStorage():取得存储的name,并打印出来
  • removeStorage():移除setStorage()函数中存储的name

    本地存储基本用法

    前面的示例也演示过了,接下来拿localStorage来做示例:

    localStorage.setItem('key', 'value'); // 设置一个localStorage,名称叫`key`
    localStorage.getItem('key'); // 获取存储的localStorage,获取的`key`对应的值`value`
    localStorage.removeItem('key'); // 移除存储的localStorage,删除的名称`key`
    localStorage.clear(); // 删除所有的localStorage

    为了方便使用,可以对其进行封装。

    设置localStorage

    function setLocalStorage(key, value) {
       return localStorage.setItem(key, value);
    }

    获取localStorage

    function getLocalStorage(key) {
        return localStorage.getItem(key);
    }

    移除localStorage

    function removeLocalStorage(key) {
        return localStorage.removeItem(key);
    }

    注:sessionStorage使用方法和localStorage类似。

    异常处理

    localStorage在目前的浏览器环境来说,还不是完全稳定的,可能会出现各种各样的问题,所以在设置localStorage时一定要考虑异常处理。localStorage的异常处理一般用try/catch来捕获/处理异常。所以我们在设置localStorage需要将try/catch添加进来,所以前面的setLocalStorage()函数可以修改成:

    function setLocalStorage(key, value) {
       try {
            localStorage.setItem(key, value);
       } catch (e) {
            if (e.name === 'QUOTA_EXCEEDED_ERR' || e.name === 'NS_ERROR_DOM_QUOTA_REACHED') {
                console.log("Error: Local Storage limit exceeds.");
                localStorage.clear();
            } else {
                console.log("Error: Saving to local storage.");
            }
       }
    }

    如果考虑更具浏览器兼容性,我们还可以将上面的代码修改成:

    function setLocalStorage(key, value) {
        try {
            localStorage.setItem(key, value);
        } catch(e) {
            if (isQuotaExceeded(e)) {
                console.log("Error: Local Storage limit exceeds.");
                localStorage.clear();
            } else {
                console.log("Error: Saving to local storage.");
            }
        }
    }
     
    function isQuotaExceeded(e) {
        var quotaExceeded = false;
     
        if (e) {
            if (e.code) {
                switch (e.code) {
                    case 22:
                        quotaExceeded = true;
                        break;
                    case 1014:
                        // Firefox
                        if (e.name === 'NS_ERROR_DOM_QUOTA_REACHED') {
                            quotaExceeded = true;
                        }
                        break;
                }
            } else if (e.number === -2147024882) {
                // IE8
                quotaExceeded = true;
            }
        }
        return quotaExceeded;
    }

    过期时间

    localStorage而言,其原生是不支持设置过期时间的,想要设置的话,就只能自己来封装一层逻辑来实现:

    function setLocalStorage(key, value) {
        var curtime = new Date().getTime(); // 获取当前时间
        // 转换成JSON字符串序列
        var valueDate = JSON.stringify({
            val: value,
            timer: curtime
        });
        try {
            localStorage.setItem(key, valueDate); // 将JSON字符串设置为存储值
        } catch(e) {
            if (isQuotaExceeded(e)) {
                console.log("Error: Local Storage limit exceeds.");
                localStorage.clear();
            } else {
                console.log("Error: Saving to local storage.");
            }
        }
    }
     
    function isQuotaExceeded(e) {
        var quotaExceeded = false;
     
        if (e) {
            if (e.code) {
                switch (e.code) {
                    case 22:
                        quotaExceeded = true;
                        break;
                    case 1014:
                        // Firefox
                        if (e.name === 'NS_ERROR_DOM_QUOTA_REACHED') {
                            quotaExceeded = true;
                        }
                        break;
                }
            } else if (e.number === -2147024882) {
                // IE8
                quotaExceeded = true;
            }
        }
        return quotaExceeded;
    }
     
    function getLocalStorage(key,exp){
        var vals = localStorage.getItem(key); // 获取本地存储的值
        var dataObj = JSON.parse(vals); // 将字符串转换成JSON对象
        // 如果(当前时间 - 存储的元素在创建时候设置的时间) > 过期时间
        var isTimed = (new Date().getTime() - dataObj.timer) > exp;
        if (isTimed){
            console.log("expires");
        } else {
            var newValue = dataObj.val;
        }
        return newValue;
    }

    这个时候我们调用:

    setLocalStorage('name', 'hello, w3cplus.com!');
    var localKey = getLocalStorage('name', 2);
    console.log(localKey);
     
本文章版权归爱创课堂所有,转载请注明出处。

更多详细内容请访问爱创课堂官网首页

http://www.icketang.com/

相关热词搜索:使用方法,机制

上一篇:node js异步IO机制
下一篇:zepto和jquery的区别,zepto的不同使用8条小结

分享到: 收藏