Web存储机制—sessionStorage,localStorage使用方法

#1

爱创课堂今天介绍Web存储机制—sessionStorage,localStorage使用方法

基本概念
Web Storage 包含两种机制:

sessionStorage为每一个给定的源维持一个独立的存储区域,该区域在页面会话期间可用(即只要浏览器处于打开状态,包括页面重新加载和恢复)
localStorage同样的功能,但是在浏览器关闭,然后重新打开后数据仍然存在
这两种机制是通过Window.sessionStorage和Window.localStorage属性使用。更确切的说,在支持的浏览器中Window对象实现了WindowLocalStorage和WindowSessionStorage对象并挂在其localStorage和sessionStorage属性下。调用其中任一对象会创建Storage对象,通过Storage对象,可以设置、获取和移除数据项。对于每个源sessionStorage和localStorage使用不同的Storage对象。

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

在了解如何使用localStorage和sessionStorage之前,先来一下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():调用该方法会清空存储中的所有键名
    简单的示例
    写一个简单的示例,页面就三个按钮:Set、Get和Remove。按钮点击时,分别绑定三个函数:setStorage()、getStorage()和removeStorage():

  • setStorage():做了localStorage和sessionStorage存储,同时存的键名为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/