localStorage 历史存储小工具

最新推荐文章于 2024-06-25 15:02:41 发布

swdenglian

最新推荐文章于 2024-06-25 15:02:41 发布

阅读量2.2k

点赞数

分类专栏：小工具文章标签： javascript 存储历史浏览记录 localStora

本文链接：https://blog.csdn.net/swdenglian/article/details/52821814

版权

小工具专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用来存储历史记录的小工具，比如你要存最近浏览的3条记录（最多3条该上限可以自己设置，最新的流量记录会被放置在第一条，相同的浏览记录位置会被更替到第一条）

源码及例子代码：http://pan.baidu.com/s/1bpJ1i6V

使用Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="../lsHistoryCls.js"></script>
<script>
    function demo() {
        // 在demo 中开辟空间 唯一标识为”id” 最高条数为3条
        var ls = new lsHistoryCls("demo", "id", 3);

        // 添加数据 如果重复将覆盖，如果超出最高长度将截取，后添加按时间倒序排列
        ls.add({"id": "1"});
        ls.add({"id": "2"});
        ls.add({"id": "3"});
        ls.add({"id": "4"});
        ls.add({"id": "5"});
        // 获取数据  返回结构为 { data:[] } 之前存储的数据都存放在data列表中
        console.log(ls.get());

//        // 删除特定的数据
//        ls.delOne({"id": "4"});
//        console.log(ls.get(), "删除数据为4的条数");
//
//        ls.delOneByUniqueKey("3");
//        console.log(ls.get(), "删除数据为2的条数");

        // 删除index的数据
        ls.delOneByIndex(0);
        console.log(ls.get(), "删除第0条数据");

        // 删除所有数据
        ls.delAll();
        console.log(ls.get(), "删除所有数据");
    }

    demo();
</script>
</body>
</html>

TS代码

/**
 * Created by D__ on 2017/2/7.
 */
interface Array {
    remove(value: number): void;
}

class lsHistoryCls {

// 历史存储空间定义
    private lsNameSpace: string = "lsHCls_";

// 空间标识分类
    private key: string;

// 唯一标识，标识localStorage lsNameSpace + key 下数据的唯一标识，用来判断是否存在该值
    private uniqueKey: string;

// 最大存储数量
    private maxNum: number;

// 构造器
    constructor(key: string, uniqueKey: string, maxNum: number) {
        // 添加数组remove 支持
        if (!Array.prototype.remove) {
            Array.prototype.remove = function (idx) {
                if (isNaN(idx) || idx > this.length) {
                    return false;
                }
                for (var i = idx + 1, n = idx; i < this.length; i++) {
                    this[n++] = this[i];
                }
                this.length -= 1;
            };
        }
        // 初始化对象中的值
        this.key = key;
        this.uniqueKey = uniqueKey;
        this.maxNum = maxNum;
    }

    private haveObject(_obj, arr) {
        for (var i = 0; i < arr.length; i++) {
            if (_obj[this.uniqueKey] == arr[i][this.uniqueKey]) return i;
        }

        return -1;
    }

    /**
     * 添加数据
     * @obj 添加对象
     */
    public add(obj: Object): Boolean {
        var res: Boolean = false;
        var realKey: string = this.lsNameSpace + this.key;
        var realkeyStr: string = window.localStorage[realKey];
        var realKeyJSON = { data: [] };

        // 判空操作，并初始化操作-------
        if (!realkeyStr) {
            realkeyStr = JSON.stringify({ data: [] });
        }


        if (JSON.parse(realkeyStr)) {
            realKeyJSON = JSON.parse(realkeyStr);
            if (!realKeyJSON.data) {
                realKeyJSON.data = [];
            }
        } else {
            realKeyJSON = { data: [] };
        }
        // 判空结束--------------------

        // 截取 maxNum 个，上限数
        realKeyJSON.data = realKeyJSON.data.splice(0, this.maxNum);

        // 判断添加数据是否为object
        if (typeof obj != "object") {
            console.error("添加的数据必须为Object");
            return false;
        }

        // 判断是否包含唯一标识key
        if(  !(typeof obj[ this.uniqueKey ] != undefined && obj[ this.uniqueKey ] != null) ){
            console.error( " 添加失败数据中没有设定的key:" + this.uniqueKey + "--" + "Object:["+JSON.stringify(obj)+"]" );
            return false;
        }

        // 判断是否包含该数据
        var index = this.haveObject(obj, realKeyJSON.data);
        if (index == -1) {  // 未包含操作
            realKeyJSON.data.unshift(obj);
            if (realKeyJSON.data.length == (this.maxNum + 1)) {
                realKeyJSON.data.remove(realKeyJSON.data.length - 1);
            }
        } else {    // 包含操作
            realKeyJSON.data.remove(index);
            realKeyJSON.data.unshift(obj);
        }

        window.localStorage[realKey] = JSON.stringify(realKeyJSON);

        return true;
    }

    /**
     * 获取历史数据
     *
     * 返回结果结构为
     * { data:[] } data 为数据列表
     */
    public get(): any {
        var realKey = this.lsNameSpace + this.key;
        var realKeyStr = window.localStorage[realKey];

        if (!realKeyStr) {
            realKeyStr = JSON.stringify({ data: [] });
        }

        return JSON.parse(realKeyStr);
    }

    public delOne(obj): any {
        var res = { resCode: "1", resMsg: "删除失败", resObj: null }

        // localstorage 中数据对象
        var realJSON = this.get();
        var realKey = this.lsNameSpace + this.key;
        var haveObjIndex = this.haveObject(obj, realJSON.data);

        if (haveObjIndex != -1) {
            res.resCode = "0"; res.resMsg = "删除成功"; res.resObj = obj; res.resObj.index = haveObjIndex;
            realJSON.data.remove(haveObjIndex);
            // 存储
            window.localStorage[realKey] = JSON.stringify(realJSON);
        } else {
            res.resMsg = "找不到该对象";
            res.resObj = null;
        }

        return res;
    }

    public delOneByUniqueKey(str):any{
        var obj = {};
        obj[this.uniqueKey] = str;

        return this.delOne(obj);
    }

    public delOneByIndex(index):any{
        var obj = {};
        var realJSON = this.get();

        obj[this.uniqueKey] = realJSON.data[index][this.uniqueKey];
        return this.delOne(obj);
    }

    public delAll(): boolean {
        window.localStorage[this.lsNameSpace + this.key] = JSON.stringify({ data: [] });
        return true;
    }
}