爱创课堂今天介绍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);
本文章版权归爱创课堂所有,转载请注明出处。
更多详细内容请访问爱创课堂官网首页