前言
項目中在某一界面需要做較爲複雜的交互,爲方便處理,多數數據操作都前端完成,最終保存時才保存到數據庫,爲了保證界面意外關閉再打開時數據仍保持,則需要將數據保存在本地,本來是想用cookie
的,想到數據大小有限制(4k
),只好換用localStorage
,然而localStorage
不支持過期,只好自己寫個插件來滿足要求。
插件源碼
/*!
* Copyright (C) Corporation. All rights reserved.
*
* Author : lihaitao
* Email : [email protected]
* Create Date : 2017-10-18
* Description : localstorage 操作工具 、支持過期處理、Key批量刪除已過期等
* Version : V1.0.0
*
* Revision History:
* Date Author Description
* 2017-10-18 lihaitao 完成第一版本
*
*/
var sdstorage = function () {
var lstorage = window.localStorage;
//保存傳入key data 多長時間過期,默認不過期
function save(dkey, data, expires) {
if (!lstorage) return false;
expires = calculateExpiration(expires);
var expiretime = 0; //不過期
if (expires) {
expiretime = expires;
}
var obj = {sdata: data, exp: expiretime};
//保存
try {
lstorage[dkey] = JSON.stringify(obj);
return true;
}
catch (e) {
console.error(e);
return false;
}
return false;
}
//獲取過期或者不存在都返回 ''
function get(dkey) {
if (!lstorage) return '';
var str = lstorage[dkey];
if (str) {
try {
var obj = JSON.parse(str);
//判斷是否過期
var now = new Date().getTime();
if (obj.exp && (obj.exp === 0 || obj.exp > now)) {
//console.log('key:' + dkey + ',離過期還有 ' + (obj.exp - now) / 1000 + ' 秒');
return obj.sdata;
} else {
//過期則刪除
remove(dkey);
}
} catch (e) {
console.error(e);
return '';
}
}
return '';
}
//清除所有,如果傳入前輟,則只清除前輟爲prefix的
function clear(prefix) {
if (!lstorage) return;
if (prefix) {
for (var i = 0; i < lstorage.length; i++) {
var key = lstorage.key(i);
//如果prefix有值,則只處理前輟相同的
if (key.indexOf(prefix) === 0) {
lstorage.removeItem(key);
}
}
} else {
lstorage.clear();
}
}
//刪除單條
function remove(dkey) {
if (!lstorage) return;
lstorage.removeItem(dkey);
}
//清除過期,傳入key前輟,則只除以prefix開始已經過期的數據
function removeexp(prefix) {
if (!lstorage) return;
for (var i = 0; i < lstorage.length; i++) {
var key = lstorage.key(i);
//如果prefix有值,則只處理前輟相同的
if (!prefix || key.indexOf(prefix) === 0) {
get(key);
}
//console.log(key);
}
}
//檢測瀏覽器是否支持
function test() {
if (lstorage) {
return true;
} else {
return false
}
}
//計算過期時間
var calculateExpiration = function (cookieExpire) {
if (cookieExpire === null || typeof cookieExpire === 'undefined') {
return null;
}
var time = cookieExpire.replace(/[0-9]*/, ''); //s,mi,h,d,m,y
cookieExpire = cookieExpire.replace(/[A-Za-z]{1,2}/, ''); //number
switch (time.toLowerCase()) {
case 's':
cookieExpire = cookieExpire;
break;
case 'mi':
cookieExpire = cookieExpire * 60;
break;
case 'h':
cookieExpire = cookieExpire * 60 * 60;
break;
case 'd':
cookieExpire = cookieExpire * 24 * 60 * 60;
break;
case 'm':
cookieExpire = cookieExpire * 30 * 24 * 60 * 60;
break;
case 'y':
cookieExpire = cookieExpire * 365 * 24 * 60 * 60;
break;
default:
cookieExpire = cookieExpire;
break;
}
var d = new Date().getTime();
cookieExpire = d + cookieExpire * 1000;
return cookieExpire;
};
return {
//檢測是否支持
test: test,
//保存傳入key data 多長時間過期,默認不過期,單位 s(秒) mi(分鐘) h(小時) d(天) m(月) y(年)
//成功返回true,或者false
save: save,
//獲取,不存在或者過期 返回 ''
get: get,
//根據key刪除
remove: remove,
//刪除已經過期的 傳入key前輟,則只除以prefix開始已經過期的數據
removeexp: removeexp,
//清除所有 如果傳入前輟,則只清除前輟爲prefix的
clear: clear,
};
}();
方法
test
作用:判斷瀏覽器是否支持,返回true false
sdstorage.test()
save
作用:保存數據,返回 true false
參數1:數據的key
參數2:數據,只支持str
,如果是JSON
,使用JSON.stringify()
轉成字符串
參數3:有效期,單位 s(秒) mi(分鐘) h(小時) d(天) m(月) y(年),不傳值則不過期
var key = 'users_info';
var data={'username':'lhtzbj12'};
sdstorage.save(key,JSON.stringify(data),'2d');//有效期2天
get
作用:獲取數據,如果數據過期返回”,並刪除
參數1:數據的key
var key = 'users_info';
var str = sdstorage.get(key);
remove
作用:刪除數據
參數1:數據的key
var key = 'users_info';
sdstorage.remove(key);
removeexp
作用:刪除過期的數據
參數1:數據key
的前輟,不傳值則刪除所有過期數據
var prefix = 'users_';
sdstorage.removeexp(prefix);//刪除所有key以'users_'開始的過期數據
sdstorage.removeexp();//刪除所有過期數據
clear
作用:刪除若干數據
參數1:數據key
的前輟,不傳值則刪除所有數據
var prefix = 'users_';
sdstorage.clear(prefix);//刪除所有key以'users_'開始的數據
sdstorage.clear();//刪除所有數據