輕量級外掛sdstorage用於操作localStorage支援過期、批量搜尋刪除等

風靈使發表於2019-04-06

前言

專案中在某一介面需要做較為複雜的互動，為方便處理，多數資料操作都前端完成，最終儲存時才儲存到資料庫，為了保證介面意外關閉再開啟時資料仍保持，則需要將資料儲存在本地，本來是想用cookie的，想到資料大小有限制（4k），只好換用localStorage，然而localStorage不支援過期，只好自己寫個外掛來滿足要求。

外掛原始碼

/*!
 * Copyright (C) Corporation. All rights reserved.
 *
 * Author      :  lihaitao
 * Email        : lhtzbj12@126.com
 * 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();//刪除所有資料

相關文章