Typescript本地存储封装，让前端存储更便捷

前言

本地存储是Web Storage API的一部分，它允许在浏览器中存储数据，以便在以后检索。本地存储的数据在浏览器会话之间是持久的，这意味着即使关闭浏览器窗口或选项卡，数据也不会丢失。

本地存储有两种类型：

• localStorage：存储的数据在浏览器会话之间是持久的，即使关闭浏览器窗口或选项卡，数据也不会丢失。
• sessionStorage：存储的数据在浏览器会话期间是持久的，当关闭浏览器窗口或选项卡时，数据将丢失。

使用Typescript封装本地存储

为了更好的使用本地存储，我们可以使用Typescript对本地存储进行封装。封装的好处是：

• 代码更简洁、更易读。
• 可以添加一些实用的功能，如过期时间、数据加密等。

下面是使用Typescript封装本地存储的代码：

class LocalStorage {
    private storage: Storage;

    constructor() {
        this.storage = window.localStorage;
    }

    setItem(key: string, value: any, expire?: number) {
        if (expire) {
            const expireDate = new Date();
            expireDate.setTime(expireDate.getTime() + expire * 1000);
            this.storage.setItem(key, JSON.stringify({
                value: value,
                expire: expireDate.toISOString()
            }));
        } else {
            this.storage.setItem(key, JSON.stringify(value));
        }
    }

    getItem(key: string): any {
        const item = this.storage.getItem(key);
        if (item) {
            const data = JSON.parse(item);
            if (data.expire) {
                const expireDate = new Date(data.expire);
                if (expireDate.getTime() < new Date().getTime()) {
                    this.removeItem(key);
                    return null;
                }
            }
            return data.value;
        }
        return null;
    }

    removeItem(key: string) {
        this.storage.removeItem(key);
    }

    clear() {
        this.storage.clear();
    }
}

const localStorage = new LocalStorage();

使用封装后的本地存储

使用封装后的本地存储非常简单，只需实例化一个LocalStorage对象即可。

const localStorage = new LocalStorage();

// 设置一个本地存储项
localStorage.setItem('name', '张三');

// 获取一个本地存储项
const name = localStorage.getItem('name');

// 删除一个本地存储项
localStorage.removeItem('name');

// 清空本地存储
localStorage.clear();

添加实用的功能

在封装本地存储时，我们可以添加一些实用的功能，如过期时间、数据加密等。

过期时间

我们可以为本地存储项设置过期时间。当过期时间到达时，本地存储项将被自动删除。

localStorage.setItem('name', '张三', 60 * 60 * 24); // 设置一个小时的过期时间

数据加密

我们可以对本地存储中的数据进行加密。这样，即使有人获得了本地存储的数据，也无法读取其中的内容。

const encryptedValue = encrypt('张三');
localStorage.setItem('name', encryptedValue);

const name = decrypt(localStorage.getItem('name'));

结语

使用Typescript封装本地存储可以使我们更好的使用本地存储，并添加一些实用的功能，如过期时间、数据加密等。这将使我们的前端代码更加健壮和安全。