JavaScript手写一个前端存储工具库

标题：JavaScript手写一个前端存储工具库

简介

前端存储工具库是用于在客户端存储数据的工具，常见的有Cookie、localStorage、sessionStorage等。今天我们将学习如何手写一个前端存储工具库，以方便我们在实际开发中使用。

代码实现

我们将实现一个名为store的前端存储工具库，支持以下功能：

1. 存储：可支持存储值类型、对象类型以及数组类型的数据。
2. 获取：支持根据key获取存储的对应值，若不存在则返回默认值。
3. 删除：删除指定key对应的值。
4. 清空：清空所有存储的值。

存储

存储数据要使用localStorage或者sessionStorage对象，根据不同的持久性来选择，我们可以通过检测是否有localStorage属性来进行判断，如果没有则使用sessionStorage。

const storage = {
    local: window.localStorage,
    session: window.sessionStorage
}
const getType = (value) => {
    const type = Object.prototype.toString.call(value).slice(8,-1);
    return type.toLowerCase();
}
const set = (key, value, type = 'local') => {
    const storageType = storage[type];
    if(getType(value) === 'object' || getType(value) === 'array') {
        value = JSON.stringify(value);
    }
    storageType.setItem(key, value);
}

在此代码段中，我们封装了一个简单的set方法，让用户可通过指定类型(local或session)存储数据，并能判断存储值是否为对象类型或数组类型，在后续操作中将其转为字符串，实现存储。

获取

const get = (key, defaultValue = null, type = 'local') => {
    const storageType = storage[type];
    let value = storageType.getItem(key);
    if(value === null) {
        return defaultValue;
    }
    try {
        value = JSON.parse(value);
    } catch (error) {
        console.warn(error);
    }
    return value;
}

在此代码段中，我们封装了一个简单的get方法，让用户可通过指定类型(local或session)获取数据，并能根据key判断是否存在该值，存在的话进行转换并返回。

删除

const remove = (key, type = 'local') => {
    const storageType = storage[type];
    storageType.removeItem(key);
}

在此代码段中，我们封装了一个简单的remove方法，让用户可通过指定类型(local或session)删除存储的数据。

清空

const clear = (type = 'local') => {
    const storageType = storage[type];
    storageType.clear();
}

在此代码段中，我们封装了一个简单的clear方法，让用户可通过指定类型(local或session)清空所有存储的数据。

示例说明

存储

store.set('name', '张三');
store.set('age', 18);
store.set('users', [{name:'li',age:18},{name:'zhang',age:19}]);
store.set('user', {name:'li',age:18});

在如上代码中，我们存储了四组数据，其中name和age存储了值类型，users和user存储了对象类型，数据已成功存储在localStorage中。

获取

console.log(store.get('name')); // 张三
console.log(store.get('age')); // 18
console.log(store.get('city', '深圳')); // 深圳
console.log(store.get('users')); // [{name:'li',age:18},{name:'zhang',age:19}]
console.log(store.get('user')); // {name:'li',age:18}

在如上代码中，我们通过指定key获取了存储的值，name和age对应的值被成功获取，city键不存在，所以默认返回了深圳。users和user都是存储的对象类型，所以通过get方法获取到了转换后的对象。

删除/清空

store.remove('name');
console.log(store.get('name')); // null

store.clear();
console.log(store.get('age')); // null

在如上代码中，我们首先删除了name对应的值，返回null，接下来清空了localStorage中的所有值，并再次获取，返回值为null。

总结

在本文中，我们手写了一个前端存储工具库，支持存储值类型、对象类型以及数组类型的数据。希望通过本文的介绍，开发者可以更好地运用前端存储，提高代码的开发效率。