轻量级插件sdstorage用于操作localStorage支持过期、批量搜索删除等

水深无声 2021-06-26 16:06 200阅读 0赞

## 前言 ##

项目中在某一界面需要做较为复杂的交互，为方便处理，多数数据操作都前端完成，最终保存时才保存到数据库，为了保证界面意外关闭再打开时数据仍保持，则需要将数据保存在本地，本来是想用`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`