具备有效期的localStorage存储

具备有效期的localStorage存储

类方式

// 具备有效期的localStorage存储-类方式。
class LocalStorageWrapper {
  // 存储数据到localStorage,记录下当前存储的时间。
  static setItem(key, value) {
    try {
      const item = {
        value,
        time: Date.now(),//过期时间-如果不输入则为无限。
      };
      localStorage.setItem(key, JSON.stringify(item));
    } catch (error) {
      console.error('存储数据到localStorage时出错:', error);
    }
  }

  // 从localStorage中获取数据,如果数据过期则返回null
  static getItem(key, cycle) {
    try {
      cycle = Number(cycle)
      if (isNaN(cycle)) {
        cycle = 1000 * 60 * 60 * 24 * 30//默认过期时间为一个月。
      }
      let data = localStorage.getItem(key)
      if (!data) {
        return null
      }
      let { time, value } = JSON.parse(data)
      if ((Date.now() - time) > cycle) {
        localStorage.removeItem(key)
        return null
      }
      return value
    } catch (error) {
      console.error('从localStorage中获取数据时出错:', error);
      return null;
    }
  }

  // 从localStorage中移除数据
  static removeItem(key) {
    try {
      localStorage.removeItem(key);
    } catch (error) {
      console.error('从localStorage中移除数据时出错:', error);
    }
  }

  // 清空localStorage中的所有数据
  static clear() {
    try {
      localStorage.clear();
    } catch (error) {
      console.error('清空localStorage时出错:', error);
    }
  }
}
// 示例用法:
const userData = {
  name: '张三',
  age: 30,
  email: 'zhangsan@example.com'
};
LocalStorageWrapper.setItem('user', userData);
const storedData = LocalStorageWrapper.getItem('user');
console.log(storedData); // 如果数据未过期,则输出userData对象;否则输出null

const storedData1 = LocalStorageWrapper.getItem('user',1); // 数据过期,则移除旧数据;
console.log(storedData1);

对象方式

// 具备有效期的localStorage存储-对象方式。
const LocalStorageWrapper= {
  // 存储数据到localStorage,记录下当前存储的时间。
  setItem(key, value) {
    try {
      const item = {
        value,
        time: Date.now(),//过期时间-如果不输入则为无限。
      };
      localStorage.setItem(key, JSON.stringify(item));
    } catch (error) {
      console.error('存储数据到localStorage时出错:', error);
    }
  },

  // 从localStorage中获取数据,如果数据过期则返回null
  getItem(key, cycle) {
    try {
      cycle = Number(cycle)
      if (isNaN(cycle)) {
        cycle = 1000 * 60 * 60 * 24 * 30//默认过期时间为一个月。
      }
      let data = localStorage.getItem(key)
      if (!data) {
        return null
      }
      let { time, value } = JSON.parse(data)
      if ((Date.now() - time) > cycle) {
        localStorage.removeItem(key)
        return null
      }
      return value
    } catch (error) {
      console.error('从localStorage中获取数据时出错:', error);
      return null;
    }
  },

  // 从localStorage中移除数据
  removeItem(key) {
    try {
      localStorage.removeItem(key);
    } catch (error) {
      console.error('从localStorage中移除数据时出错:', error);
    }
  },

  // 清空localStorage中的所有数据
  clear() {
    try {
      localStorage.clear();
    } catch (error) {
      console.error('清空localStorage时出错:', error);
    }
  },
}
/* // 示例用法:
const userData = {
  name: '张三',
  age: 30,
  email: 'zhangsan@example.com'
};
LocalStorageWrapper.setItem('user', userData);
const storedData = LocalStorageWrapper.getItem('user');
console.log(storedData); // 如果数据未过期,则输出userData对象;否则输出null

const storedData1 = LocalStorageWrapper.getItem('user',1); // 数据过期,则移除旧数据;
console.log(storedData1);
posted @ 2023-08-06 22:14  方朝端  阅读(141)  评论(0编辑  收藏  举报

我的页脚HTML代码